0% found this document useful (0 votes)
97 views88 pages

Lifestyle

Website using php mysql

Uploaded by

Indra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
97 views88 pages

Lifestyle

Website using php mysql

Uploaded by

Indra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 88

Annexure-l

WEB DEVELOPMENT

Submitted in partial fulfillment of the requirements

for the award of the degree of…

BACHELOR OF COMPUTER APPLICATIONS

SUBMITTED TO: SUBMITTED BY:

Mrs Heena Bhalla Mam    IndraPrakash Rahul yadav


(413) (414)

KAMAL INSTITUTE OF HIGHER EDUCATION &


ADVANCED TECHNOLOGY
Delhi - 110059
Batch (2018-2021)

1|Page
Annexure -II
Certificate

I , ( Name& Roll no.), certify that the Summer Training Project Report
(BCA) entitled “ “ is done by us
and it is an
authentic work carried out by us at . The
matter
embodied in this project work has been submitted earlier for the award
of any
degree or diploma to the best of my knowledge and belief.

Signature of the Student

Date:

Certified that the Project Report (BCA) entitled ”“


done by the above student is completed under my guidance.

Signature of the Guide.


Date:
Name of the Guide:
Designation:

2|Page
3|Page
Acknowledgment

Every project big or small is successful largely due to the effort of a number of
wonderful people who have always given their valuable advice or lent a
helping hand. I sincerely appreciate the inspiration; support and guidance of all
those people who have been instrumental in making this project a success.

I feel deeply honoured to express my sincere thanks to my project supervisor,


Mrs Heena Bhalla for guiding me all through the project and providing
valuable insights leading to the successful completion of my project.

I am extremely grateful to the department of programming for the confidence


bestowed in me and entrusting my project entitled “E-commerce website”.

4|Page
Annexure-lll

Table of Contents
S No Topic Page No
1 Certificate -
2 Acknowledgement -
3 List of Tables/Figures -
4 Chapter-1: Problem Definition 1-6
5 Chapter-2: System Analysis & Design 7-21
6 Chapter-3: System Coding & Implementation 22-35
7 Appendix-A 36-81
8 Bibliography 82

List of Tables
Table No Title Page No
1 Testing 26-32

List of Figures
Figure No Title Page No
1 SDLC 10
2 DFD Level Zero 13
3 DFD Level 1 14
4 DFD Level 2 15
5 ER Diagram 16
6 Input Design 17
7 Output Design 19
8 System Database Fields 21-22
9 System Database Records 22

5|Page
CHAPTER-1
PROBLEM STATEMENT

1.1 Introduction
Online shopping or e-shopping is a form of electronic commerce which allows
consumers to directly buy goods or services from a seller over the Internet
using a web browser. India is witnessing an unprecedented economic boom in
service as well as goods industry and this economic boom is visible all around
us. Companies are facing a tough competition in this dynamic arena of
business. They are always looking for new avenues so that they can increase
contact with consumers and to achieve this aim they are letting no stone
unturned. Due to increased awareness, employment and increased per capita
income of Indian consumers there has been an exponential rise in consumer
spending. Experiencing the convenience of avoiding travelling to shop and the
time saved in bargain hunting are adding advantage and craze for online
shopping. Cash on delivery is also giving sense of security to Indian
consumers. With the universal availability of Internet connectivity, consumers
save time and efforts by shopping online. The increasing use of Internet by the
younger generation in India provides an emerging prospect for online retailers.
There is a common saying about the Indian retail consumers' "can't touch,
won't buy" mentality. However, this is gradually changing with the rising trend
of online shopping.

E-commerce businesses may employ some or all of the following:

 Online shopping web sites for retail sales direct to consumers.


 Providing or participating in online marketplaces, which process third-party
business-to-consumer or consumer-to-consumer sales.
 Business-to-business buying and selling.
 Gathering and using demographic data through web contacts and social media.
 Business-to-business electronic data interchange.
 Marketing to prospective and established customers by e-mail or fax (for
example, with newsletters).
 Engaging in retail for launching new products and services.

1|Page
According to an Associated Chambers of Commerce and Industry of India
(ASSOCHAM) survey.In 2017, about 100 million consumers purchased
online and the number is expected to cross 120 million by 2020 with the
rise of digital natives, better infrastructure in terms of logistics,
broadband and Internet-ready devices to fuel the demand in e-Commerce.

India has always been a land of great potential. The socioeconomic condition
of the country has improved many folds after independence and India is now
emerging as one of the leading countries in the world. Moreover, with a
population of over 100 crore and a growth rate of above 6%, it can be
compared to a marketing giant. Hence it can be well judged why online
shopping in India is rising at fast pace over the days. As technology is
spreading to the remotest villages and many job opportunities are presenting
themselves to the unemployed youth more and more people are gaining
awareness and the money to purchase expensive and luxurious items over the
internet.

1.2 Problem Statement


E-commerce provides an easy way to sell products to a large customer base.
However, there is a lot of competition among multiple e-commerce sites.
When users land on an e-commerce site, they expect to find what they are
looking for quickly and easily. Also, users are not sure about the brands or the
actual products they want to purchase. They have a very broad idea about what
they want to buy. Many customers nowadays search for their products on
Google rather than visiting specific e-commerce sites. They believe that
Google will take them to the e-commerce sites that have their product.

The purpose of any e-commerce website is to help customers narrow down


their broad ideas and enable them to finalize the products they want to
purchase. For example, suppose a customer is interested in purchasing a
mobile. His or her search for a mobile should list mobile brands, operating
systems on mobiles,

2|Page
screen size of mobiles, and all other features as facets. As the customer selects
more and more features or options from the facets provided, the search
narrows down to a small list of mobiles that suit his or her choice. If the list is
small enough and the customer likes one of the mobiles listed, he or she will
make the purchase.

The challenge is also that each category will have a different set of facets to be
displayed. For example, searching for books should display their format, as in
paper pack or hardcover, author name, book series, language, and other facets
related to books. These facets were different for mobiles that we discussed
earlier. Similarly, each category will have different facets and it needs to be
designed properly so that customers can narrow down to their preferred
products, irrespective of the category they are looking into.
The takeaway from this is that categorization and feature listing of products
should be taken care of. Misrepresentation of features can lead to incorrect
search results. Another takeaway is that we need to provide multiple facets in
the search results. For example, while displaying the list of all mobiles, we
need to provide facets for a brand. Once a brand is selected, another set of
facets for operating systems, network, and mobile phone features has to be
provided. As more and more facets are selected, we still need to show facets
within the remaining products.

1.3 Benefits of E-commerce


 Increase in sales.
 Increase in customers.
 Ability to be open 24/7.
 Instant processing of transactions.
 Increased business reach.
 Use electronic payment refers to paperless monetary transactions.

3|Page
These business transactions occur either as business-to-business (B2B),
business to-consumer (B2C), consumer-to-consumer (C2C) or consumer-to-
business (C2B). The terms e-commerce and e-business are often used
interchangeably. The term ETail (electronic retailing) is also sometimes used in
reference to transactional processes for E-Shopping or Online Shopping.

Online Shopping
 E-Shopping is the browsing and purchase of goods using computer (Internet)
or Television catalog; also called Home Shopping.
 Online Shopping is a form of e-commerce which allows customers to directly
buy goods form seller over the Internet.

Online shopping is a form of electronic commerce which allows consumers to


directly buy goods or services from a seller over the Internet using a web
browser. Consumers find a product of interest by visiting the website of the
retailer directly or by searching among alternative vendors using a shopping
search engine, which displays the same product's availability and pricing at
different e-retailers. A typical online store enables the customer to browse the
firm's range of products and services, view photos or images of the products,
along with information about the product specifications, features and prices.
Online stores typically enable shoppers to use "search" features to find specific
models, brands or items. Online customers must have access to the Internet and
a valid method of payment in order to complete a transaction, such as a credit
card, a debit card, or a service such as PayPal. For physical products (e.g.,
books or clothes), the e-retailer ships the products to the customer; for digital
products, such as digital audio files of songs or software, the e-retailer typically
sends the file to the customer over the Internet.

1.4Advantages of Online Shopping


1) Saves time: Online shopping saves us a huge amount of time. We can buy any
of our favorite products from our home only and need not visit the malls.
2) Cost Effective: The products can be bought at a much-discounted rate by
shopping online. This is because online stores offer huge discounts and
lucrative offers on the purchase of each and every product. This is done to
attract more customers from all over the world.
3) Other Facilities: The products are freely shipped and delivered at our
doorstep without any extra charge. Moreover, if we find them not suited to our
purpose, we can return them without purchasing any time. Apart from that if
we do purchase these items and find them to be defective then we can return
them within fourteen days of the purchase and we will get all the money back.

4|Page
4) Shop any store worldwide: Never again be limited geographically. Many
merchants do not have physical stores in every state, and certainly not in every
country. When you shop online, you can browse through stores around the
block or around the globe! Discover amazing new items from exotic places that
you perhaps have never even heard of before.
5) Ship your gifts directly: When you order online, you can send gifts or even
have gift baskets delivered directly to their recipient. This means you can avoid
long waits at the post office and you can get your gift delivered faster. Many
stores even offer customized cards and gift wrapping to go along with your
present.
6) Find items you might not see in stores: Since brick and mortar stores are
limited on space, merchants usually don’t carry all of the items they sell in
store. Online, you can find their entire inventory, along with many choices of
colors, styles, and even customization options. Shop on the Internet so you can
find exactly what you want.
7) No more waiting in line and pushing through crowds: Malls and retail
stores can be chaotic, especially during a big sale or a holiday season. Don’t
stress yourself out, just shop from home! You’ll never have to stand in a long
checkout line or weave your way through crowds just to get the items you
want. Shop online and you can stay in the comfort of your own home.
8) The Internet never closes: You can shop anytime online 24 hours a day 7
days a week. Online stores never close, so you never have to worry about
making time to go to the store. Online shopping is perfect for night owls or
anyone who is just too busy to make a trip to the store.

The act of buying things from websites and not shops certainly took a long time
to blend in with the shopping mind-set of the Indian customer. The current
scenario is one, which is witnessing a change in this mind-set. There have been
many websites that have been launched with the objective of selling products to
customers.

Products belonging to various product sectors are now being sold on these
websites and the range is quite a large one right from expensive laptops and
LCD televisions to mundane grocery items.

Online shopping in India, is certainly witnessing a period, which entails things


such as rising number of online sales and fantastic revenue and profit figures.

There have been many products, which have caught the fancy of online
shoppers and one of them is a handset. Handsets, irrespective of the brand, are
being sold in magnanimous numbers on different websites. All the major
market players in the telecommunications sector, FMCG sector, services,
mobile sector etc. are doing quite well with the sales that they are getting from
this online platform. The money that is earned is being put to good use by using
it in the betterment of the respective R&D departments.

5|Page
Apart, from the businesses doing well, the customers are also given many
fantastic features. Some of them include things such as free gifts with every
online purchase while some involve special offers that are quite economical
and affordable.

Limitation of the Study: -


1. Security
The biggest drawback of e-commerce is the issue of security. People fear to
provide personal and financial information, even though several
improvements have been made in relation to data encryption. Certain websites
do not have capabilities to conduct authentic transactions. Fear of providing
credit card information and risk of identity limit the growth of e-commerce.

2. Lack of privacy
Many websites do not have high encryption for secure online
transaction or to protect online identity. Some websites illegally collect
statistics on consumers without their permission. Lack of privacy discourages
people to use internet for conducting commercial transactions.

3. Tax issue
Sales tax is another bigger issue when the buyer and seller are situated in
different locations. Computation of sales tax poses problems when the buyer
and seller are in different states. Another factor is that physical stores will lose
business if web purchases are free from tax.

4. Product suitability
People have to rely on electronic images to purchase products. Sometimes,
when the products are delivered, the product may not match with electronic
images. Finally, it may not suit the needs of the buyers. The lack of ‘touch
and feel’ prevent people from online shopping.

5.Technical limitations
Some protocol is not standardized around the world. Certain software used by
vendor to show electronic images may not be a common one. It may not be
possible to browse through a particular page due to lack of standardized
software. Insufficient telecommunication bandwidth may also pose technical
potential.

CHAPTER-2

6|Page
SYSTEM ANALYSIS & DESIGN

2.1 SYSTEM STUDY

In day to day life, we will need to buy lots of goods or products from a
shop. It may be food items, electronic items, house hold items etc. etc.
Now days, it is really hard to get some time to go out and get them by
ourselves due to busy life style or lots of works. In order to solve this, B2C
E-Commerce websites have been started. Using these websites, we can
buy goods or products online just by visiting the website and ordering the
item online by making payments online.

2.2 EXISTING SYSTEM

Many customers go for purchasing offline so as to examine the product


and hold the possession of the product just after the payment for the
product. In this contemporary world customer’s loyalty depends upon the
consistent ability to deliver quality, value and satisfaction. Offline
shopping has a sense of immediacy. You get to possess the item you've
purchased the very moment. If we can search and make a list of items that
we would like to try while shopping, before actually going out. This way
we can be more confident in our purchase and not missing out something...
This can also help us to decide what areas to visit. And plan such an event
with friends....

2.2.1 LIMITATIONS OF EXISTING SYSTEM

 Time Consuming
 Shipping Rates
 Refunds/Returns Disputes
 Lack of options
 Cash-Back offers not present
 Bad customer service

Also, there are expenses for traveling from house to shop. More over the shop from
where we would like to buy something may not be open 24*7. In order to 7 overcome
these, we have e-commerce solution, i.e. one place where we can get all required
goods/products online.

2.3 PROPOSED SYSTEM


To remove all the disadvantages of conventional methods, a system is
proposed which is an online shopping. The purpose of online shopping is
to save time, save money. Through online shopping one can save his
valuable time. One can watch and select things he wants to buy. Through
online shopping we can save our money because prices are less than

7|Page
market prices and we receive our bought things at our home. No need to
go anywhere and do shopping. We can get different varieties of things
online and we can choose which one we want. 8 Through Online
Shopping, a person who wants to buy is a lifestyle e-commerce web
application, which retails various fashion and lifestyle products. This
project allows viewing various products available enables registered users
to purchase desired products instantly using PayPal payment processor
(Instant Pay) and also can place order by using Cash on Delivery (Pay
Later) option. This project provides an easy access to Administrators and
Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies
must be studied and understood.

2.3.1 MERITS OF PROPOSED SYSTEM: -

 Convenience:This is one of the main reasons that online shopping


hasbecome so popular, as it allows you to switch stores and products
by clicking a button rather than traveling to a new store.
 Immediacy:When you purchase a new product, whether for yourself
or for another person, it is always nice to have that product in your
possession immediately.
 Selection:Of course, a large selection means that your decision-
making process may be a bit more difficult, but it also makes it more
likely that you will find a high-quality product that truly pleases you.
 Quality:Needless to say, the quality of a product is also very
important. And, while most online shopping offers you the ability to
return faulty or imperfect products.
 Saving Money:Another very important aspect of any shopping
experience is trying to save as much money as possible. One reason
that people enjoy online shopping is that you can often find a product
more cheaply online than you can in stores.
 Discounts &Offer:Yes, online shopping is better than offline
because we can shop at any of our favorite shop and can get the
delivery on same day itself.

2.4 SYSTEM DEVELOPMENT LIFE CYCLE (SDLC)

System Development Life Cycle is a systematic approach for application


development or system development. SDLC is the process of building the
system that result in a high quality, cost-effective, within time and efficient
application that is cheap to maintain, easy to enhance and that can work
effectively.  It is divided in several phases and each phase comprised of
multiple steps, and they are as follows: -

8|Page
Feasibility Study:In this phase the desired system is examined and
determined that whether new system is actually achievable or feasible.

Analysis:In this phase thorough system requirements are gathered by IT


specialists, analysing of the requirement undertaken.

Design:In this phase the system model is designed like graphical user
interface and database.

Development:In this phase the design is executed into physical system by building
the database and programs.

Testing:In this phase a thorough testing is done on developed system.

Deployment:In this phase the system is deployed in to actual workforce


and used.

9|Page
At Capacity, we follow the SDLC to build an application so that it is of high quality,
cost-effective, easy to enhance and that can work effectively. Below is the diagram
that can summarize our way of working using SDLC: -

Figure no.1: - SDLC Flow Diagram

10 | P a g e
Important Activity of SDLC

1. Plan

2. Analysis

3. Design

4. Development

5. Test

6. Implement

7. Maintain

Plan

 Appoint web master team (two or more person)

 Define the objective of E-commerce website/Protocol to be developed.

 Define the project scope

 Develop the project plan including tasks, resources and time frame.

Analysis

 Who is the audience?

 B2B

 B2C

 Others

 Gather the system requirement for the system

 SRS (System requirements specification)

Design

 Design the navigation view

11 | P a g e
 Hyperlinks plan & button

 Backend required

 Database

 Gateway payment

Test/Quality check

 Test website

 Check for broken links


 Speed: Slow pages

 Database test records

 Updating of database

 Money Transaction (if applicable)

Implement

 Select hosting company


 Pay hosting charges and get password
 Upload website to internet server

Maintain & Update

 Regularly change and update content


 Perform SEO
 Updates keywords/ meta tag as per the changes in business needs

12 | P a g e
13 | P a g e
Data Flow Diagram: -

Zero Level DFD – E-Commerce

Figure no.2: -Zero Level DFD – E-Commerce

14 | P a g e
Customer Generate
Management Customer Report

Payment Generate
Management Payment Report

E-Commerce
Products Generate
Portal
Management Products Report

Sales Generate
Management Sales Report

Login Check
Management User Login Details

System User Generate

Management System User Report

First Level DFD – E-Commerce Portal

Figure no.3: -First Level DFD – E-Commerce Portal

15 | P a g e
Second Level DFD – E-Commerce Portal

Figure no.4: -Second Level DFD – E-Commerce Portal

16 | P a g e
ER – Diagram: -

Figure no.4: -ER – Diagram

17 | P a g e
Input Form Design:

Index Page: -

Figure no.5: - Index.html

18 | P a g e
Product Page: -

Figure no.5: - product.html

19 | P a g e
Cart Page: -

Figure no.5: - Cart.html

Output Design: -

Figure no.5: - Success.html

20 | P a g e
Database design

Table 1: -Index

Figure no.6: - System Database Fields 1

Figure no.7: - System Database Fields 2

21 | P a g e
Figure no.8: - System Database Fields3

Figure No-7: - System Database Records

22 | P a g e
CHAPTER-3

System Coding & Implementation

3.1 System requirement

A specification is a set of requirements. Requirements define website behavior


and user interaction. In other words, requirements are capabilities and
functionalities that are required in the end-product.

A website requirements specification document describes your ecommerce


website in detail — including who will do what, how they will do it, and what
the business goals are. It also serves as an agreement between you and the
development agency, ensuring both sides are on the same page.

There are two main sets of requirements: functional and non-functional.


Functional refers to the technical functionality of the website — what the
website is supposed to do. Non-functional requirements describe how the
website is supposed to perform a certain function.

For example, among the essential functional requirements for an ecommerce


website are things like: adding items to the cart, navigating the website,
interacting with the user interface, etc. Non-functional requirements would be
how the server handles requests, how it stands up to increasing amounts of
logins/users, and other concerns like security and usability.

3.1.1 Hardware Requirement 

Basic technical e-commerce requirements of a website that can support e-commerce


operations. We consider the size, purpose, and traffic on the site to determine the use
of server hardware. Storage capacity and computing power required of the webserver
depend on the volume of the e-commerce websites and software that will run on the
computer.

23 | P a g e
E-commerce contains HTML, PHP, JavaScript, database, media files that make up the
entire website are stored in a web server. Hardware for setting up a webserver
completely depends on your requirements.

 CPU: for web 1,6 GHz, for web and database 4 x 1,6 GHz CPU.
 RAM: 4GB.
 Minimum database space: 10GB.
 CPU: Quad 2GHz+ CPU.
 RAM: 6GB.
 Minimum database space: 10GB

3.1.2 Software Requirements

3.1.2.1 Microsoft Windows XP (Home and Professional Editions),

Windows7

3.1.2.2MySQL

3.1.2.3JavaScript, NetBeans IDE, CSS, jQuery, JBoss Application

ServerV6.0.

3.1.2.4MySQL-Connector-Java

3.1.2.5Browser e.g. Mozilla Firefox, chrome, Flock etc.

3.1.2.6Window 7 is used as the operating system in this research work.

3.2 Implementation & Testing

The process of testing of an integrated hardware and software system to verify that
the system meets its specified requirements. Verification: Confirmation by
examination and provisions of objective evidence that specified requirements have
been fulfilled. To test the system as a whole, requirements and expectations should
be clear and the tester needs to understand real time usage of application too.

The objective of testing is to ensure: -

 Software reliability
 Software quality
 System Assurance

24 | P a g e
 Optimum performance and capacity utilization

3.2.1 Types of testing: -

1) Browser compatibility
 Lack of support for early browsers
 Browser specific extensions
 Browser testing should cover the main platforms (Linux,
Windows, Mac etc.)

2) Page display
 Incorrect display of pages
 Runtime error messages
 Poor page download time
 Dead hyperlink, plugin dependency, font sizing, etc.

3) Session Management
 Session Expiration
 Session storage

4) Usability
 Non-intuitive design
 Poor site navigation
 Catalog navigation
 Lack of help-support

5) Content Analysis
 Misleading, offensive and litigious content
 Royalty free images and copyright infringement
 Personalization functionality
 Availability 24/7

6) Availability
 Denial of service attacks
 Unacceptable levels of unavailability

25 | P a g e
7) Back-up and Recovery
 Failure or fall over recovery
 Backup failure
 Fault tolerance

8) Transactions
 Transaction Integrity
 Throughput
 Auditing

9) Shopping order processing and purchasing


 Shopping cart functionality
 Order processing
 Payment processing
 Order tracking

10) Internationalization
 Language support
 Language display
 Cultural sensitivity
 Regional Accounting

11) System Integration


 Data Interface format
 Interface frequency and activation
 Updates
 Interface volume capacity
 Integrated performance

12) Performance
 Performance bottlenecks
 Load handling
 Scalability analysis

26 | P a g e
13) Login and Security
 Login capability
 Penetration and access control
 Insecure information transmission
 Web attacks
 Computer viruses
 Digital signatures

3.3 Test Cases: -

Test Case ID Start

Test Case Description To interact with the system, Italso


defines the actions a user can perform in
CRS

Input Data Enter data in the fields

Expected Result System transfer control to user main


screen to proceed further actions

Actual Result Actual Results match Expected Results

Pass/Fail Pass

Remarks No

Table No-1: Testing

3.3.1 “Sign In Module” Test Cases

27 | P a g e
Test case for Sign In module with specific test data.

28 | P a g e
Table No. 2: - Test case for Sign In module

29 | P a g e
3.3.2 Test case for Sign Up module with specific test data.

30 | P a g e
31 | P a g e
32 | P a g e
Table No.3: Test case for Sign In module

33 | P a g e
3.4 Limitation

1. Security: One of the main limitations of eCommerce is security. In most


cases, people are hesitant to provide their personal and financial details in
spite of advanced data encryption security systems in place. Moreover,
there are some websites that do not have the capability and features
installed to authenticate transactions. As such, there are instances
of fraudulent activities. The fear of providing financial information like
credit card details hinders the growth of eCommerce.
2. Lack of Privacy: To some extent, the privacy of a customer is
compromised in eCommerce. You need to provide your personal details,
such as address, telephone number, and so on to the seller. There are still
lots of sites that do not have the advanced technology to protect sensitive
information. Moreover, there are also sites that illegally collect consumer
statistics without permission. This is one reason why people get skeptical
while using eCommerce.
3. Tax Issue: In case of different geographical locations, sales tax becomes
an issue. Many a time seller have faced problems in the computation of
sales tax. Moreover, physical stores have a risk of losing business if online
transactions are exempted from taxation.
4. Fear: In spite of popularity, there still resides an element of doubt in the
mind of people when it comes to online shopping. This is because the
customer cannot physically examine the product and is not sure about the
features and attributes. This is why a lot of people prefer shopping from
physical stores.
5. Product Suitability: As already mentioned, it is not possible for people to
physically examine the product in eCommerce. In many cases, the original
product may not match with the picture or specifications in the eCommerce
site. This absence of ‘touch and feel’ creates a discouraging effect.
6. Cultural Obstacles: As the process of eCommerce encompasses
customers across the globe, the habits, traditions, and culture differ. There

34 | P a g e
may also be linguistic problems and all these may lead to issues between
the seller and buyer.
7. High Labor Cost: In order to get the whole eCommerce and delivery
process right, a specialized workforce is required. To get all these in the
right shape, companies have to shed a good amount of money and employ a
talented pool of people.
8. Legal Issues: A lot of legal compliances and cyber laws that need to be
taken care of in an eCommerce business. These regulations may vary from
country to country. All these reasons deter businesses from going
electronic.
9. Technical Limitations: eCommerce requires advanced technology
platforms for better performance. Some limitations, such as lack of proper
domain, network and software issues and so on can affect the seamless
performance of an eCommerce site.

10. Huge Technological Cost: Last but not the least; a lot of money needs to
be invested to be built up the technical infrastructure needed to run an
eCommerce business. Moreover, they need to be upgraded based to keep
abreast with the changing technology

3.5Future scope

1) Convenience: Sometimes, the question arises that why do you use e-


commerce website for online shopping? The most prominent answer to this
question is convenience. One person can shop, buy and sell products while
sitting at home at any time.

2) Wide Platform: E-commerce brings a wide range of customers across the


nation or globe to your business. Therefore, it is a wise choice to choose an
e-commerce platform to cross the geographical barriers for your business.

3) Business promotion: E-commerce is directly link to your business


promotions, as it is the age of digital media. Making your business
available online is crucial to your business development such as, highly
convenience, wide exposure, global customer, easy to run, etc. and it will
help in creating a strong & global brand image for your business.

4) Better product information: Most e-commerce websites have detailed


information of their products along with the images & videos for product
demonstration. It helps in customer getting a clear image of the product &
its usability.

35 | P a g e
5) Easy setup: The setting up cost of e-commerce business is extremely low
as compared to setting up of a physical shop. Moreover, it is quite easier to
license and permit e-commerce marketing site than a physical shop.

6) Economy: As, there is no investment in terms of infrastructure or insurance


in the e-commerce business, more money can be invested in the products,
strategy & promotion. It will boost your marketing strategies and thus can
also increase the traffic on your e-commerce website.

7) Lesser cost: If the inventory management of goods and services is an


automated process then not only there will be a reduction in costs, but also
in risk. Also having an ecommerce business is much more cost effective
than a physical store as it saves your extra expenses like rent, electricity,
etc.

8) Round the clock service:E-commerce provides us round the clock services


at all times even in midnight. So, the customers do not require visiting a
physical market if they need something during the night. It is the most
convenient option for the people who are usually busy with their working
schedules. So, it helps you to be available for your customer 24×7.

3.6Conclusion:

Online shopping is the new mantra of this age and the people of India are
applying this in their lives to a great extent nowadays. As we progress further,
the growth rate of online marketing in our country will leap to the stars.
According to a research report — State of e-commerce in India by Commerce
for ASSOCHAM, “India’s Internet base, is already the third highest in the world
after China and the US, is growing by nearly 40% every year”. Hence, the rise
of online shopping in the Indian subcontinent has been meteoric in the recent
years. The number of shopping websites has increased and so has the total
number of persons who prefer shopping online.

After careful observation, it has come to my conclusion that e-commerce has


undeniably become an important part of our society. The world wide web is
and will have a large part in our daily lives. It is therefore critical that small
businesses have their own to keep in competition with the larger websites.
Since web developers have lowered down the prices for their services, it has
become more affordable for small businesses to use the world wide web to
sell their products. Although there are negative aspects of e-commerce, small
businesses have tried to accommodate to the needs of the consumers. For
example, one of the negative aspects of e-commerce is that consumers lack

36 | P a g e
the advice and guidance of sellers, to accommodate that, they have customer
service through the phone of online to answer any questions. It is also
important to note that e-commerce does not benefit all small companies
equally. How much revenue a business gets from e-commerce depends on
what kind of service it gives. For example, most people would like to try on
clothes before they buy them, so it probably would not benefit a small
business that sells clothes as much as a small business that sells home supplies
or specialty books. Nevertheless, e-commerce does benefit any business even
in small ways. This is why it is crucial to understand how e-commerce affects
small businesses because it is becoming such a huge part of how society
functions that it effects the economy greatly and whatever happens to the
economy affects us. This is why is it important to understand this subject
because in the long run, it will affect all of us.

Appendix (Source Code)

Module 1-

1.1 HTML code: -

37 | P a g e
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Lifestyle Store</title>
<link rel="Stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo">Lifestyle Store</div>
<div class="header-link">
<a href="login.html"> Sign up </a>
</div>
<div class="header-link">
<a href="login.html"> Login </a>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image">
<center>
<div class="banner-content">
<h1>We sell lifestyle.</h1>
<p> Flat 40% OFF on premium brands .</p>
<a href="http://Google.com/" class="button" target="_blank">Shop Now</a>
</div>
</center>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<imgsrc="img/watch.jpg" alt="Watch" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/camera.jpg" alt="Camera" class="thumbnail">
<div class="caption"> 38 | P a g e
<h2>Cameras</h2>
<p>Choose among the best available in the world.</p>
</div>
This is the basic code of HTML
1.2 Style Sheet:-

/*
external Style Sheet
*/
body
{ width: 100%;
height: 100%;
margin: 0; }

a
{text-decoration: none;
background-color: transparent;
color:#ededed; }

.header{
background-color:#000;
color:#fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner-header{
width:80%;
margin:auto;
}
.logo{
float: left;

39 | P a g e
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
}
.header-link{
float:right;
font-size:14px;
height: 50px;
padding: 15px 15px;
font-size:16px;
font-weight: bold;
}
.content{
min-height: 600px;
}
.banner-image{
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(img/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image{
padding-top: 12%;
width:80%;
margin:auto;
}

40 | P a g e
.banner-content{
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}
.button{
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container{
width:90%;
margin:auto;
overflow:hidden;
}
.items{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;

41 | P a g e
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
margin-left:1%;
}
.thumbnail{
display: block;
max-width: 100%;
height: auto;
}
.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{
background-color: #000;
color:#fff;
font-size:14px;
}

#image {
float: left;
padding: 0px 20px 20px20px;

42 | P a g e
Module-2

Bootstrap:-

Here is the list of the pages you will create using bootstrap:
1. Index page
2. Login page
3. Signup page
4. Product page
5. Cart page
6. Settings page
7. Success page
This document explains how to build each of these pages using Bootstrap:-

1index.html:-
Code-
<!DOCTYPE html>
<html>
<head>

<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<!--jQuery library-->
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>

<!--Latest compiled and minified JavaScript-->


<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>

43 | P a g e
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lifestyle Store</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphiconglyphicon-user"></span>
Sign Up</a></li>
<li><a href="login.html"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="banner-image">
<div class="inner-banner-image">
<center>
<div class="banner-content">

44 | P a g e
<h1>We sell lifestyle.</h1>
<p> Flat 40% OFF on premium brands .</p>
<a href="product.html" class="btnbtn-danger btn-lg active"
target="_blank">Shop Now</a>
</div>
</center>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<imgsrc="img/7.jpg" alt="Watch" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/1.jpg" alt="Camera" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best available in the world.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/8.jpg" alt="Shirt" class="thumbnail">

45 | P a g e
<div class="caption">
<h2>Shirt</h2>
<p>Our exquisite collection of shirt.</p>
</div>
</a>
</div>
</div>

<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000</p>
</center>
</div>
</footer>
</body>
</html>
Module 2-

Bootstrap:-

Here is the list of the pages you will create using bootstrap:

1. Index page

2. Login page

3. Signup page

4. Product page

5. Cart page

6. Settings page

7. Success page

This document explains how to build each of these pages using Bootstrap:-

46 | P a g e
1. index.html:-

Code-

<!DOCTYPE html>

<html>

<head>

<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>

<!--jQuery library-->

<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>

<!--Latest compiled and minified JavaScript-->

<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>

<link rel="Stylesheet" type="text/css" href="newcss.css">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Lifestyle Store</title>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-


target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php">Lifestyle Store</a>

</div>

47 | P a g e
<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li><a href="signup.html"><span class="glyphiconglyphicon-user"></span> Sign


Up</a></li>

<li><a href="login.html"><span class="glyphiconglyphicon-log-in"></span>


Login</a></li>

</ul>

</div>

</div>

</nav>

<div class="banner-image">

<div class="inner-banner-image">

<center>

<div class="banner-content">

<h1>We sell lifestyle.</h1>

<p> Flat 40% OFF on premium brands .</p>

<a href="product.html" class="btnbtn-danger btn-lg active" target="_blank">Shop


Now</a>

</div>

</center>

</div>

</div>

<div class="container">

<div class="items">

<a href="#">

<imgsrc="img/7.jpg" alt="Watch" class="thumbnail">

<div class="caption">

<h2>Watches</h2>

<p>Original watches from the best brands.</p>

</div>

</a>

</div>

48 | P a g e
<div class="items">

<a href="#" >

<imgsrc="img/1.jpg" alt="Camera" class="thumbnail">

<div class="caption">

<h2>Cameras</h2>

<p>Choose among the best available in the world.</p>

</div>

</a>

</div>

<div class="items">

<a href="#" >

<imgsrc="img/8.jpg" alt="Shirt" class="thumbnail">

<div class="caption">

<h2>Shirt</h2>

<p>Our exquisite collection of shirt.</p>

</div>

</a>

</div>

</div>

<footer>

<div class="container">

<center>

<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000</p>

</center>

</div>

</footer>

</body>

</html>

2. login.html:-

49 | P a g e
Code-<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

<!--Latest compiled and minified JavaScript-->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log In</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>

50 | P a g e
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphiconglyphicon-user"></span>
Sign Up</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
<p>&nbsp;</p><br><br><br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<div class="panel panel-primary" >
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-
mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password"
name="password" required = "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Login</button><br><br>
</form><br/>

51 | P a g e
</div>
<div class="panel-footer"><p>Don't have an account? <a
href="signup.html">Register</a></p></div>
</div>
</div>
</div>
</div><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>

3. signup.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

52 | P a g e
<!--Latest compiled and minified JavaScript-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign Up</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphiconglyphicon-user"></span> Sign
Up</a></li>
<li><a href="login.html"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br>

53 | P a g e
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
<h2>SIGN UP</h2>
<form>
<div class="form-group">
<input class="form-control" placeholder="Name" name="name" required =
"true">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-
mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password"
name="password" required = "true">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Contact"
name="contact" required = "true">
</div>
<div class="form-group">
<input class="form-control" placeholder="City" name="city" required =
"true">
</div>
<div class="form-group">
<input class="form-control" placeholder="Address" name="address" required
= "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Submit</button>
</form>

54 | P a g e
</div>
</div>
</div><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>
4. Product.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

<!--Latest compiled and minified JavaScript-->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">

55 | P a g e
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br>
<div class="container">
<div class="jumbotron">
<h1>Welcome to our Lifestyle Store!</h1>

56 | P a g e
<p>We have the best cameras, watches and shirts for you. No need to hunt
around, we
have all in one place.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/5.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Cannon EOS</h3>
<p>Price:Rs.36000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/2.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.40000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">

57 | P a g e
<div class="thumbnail">
<imgsrc="img/3.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.50000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/4.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Olympus DSLR</h3>
<p>Price:Rs.80000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/9.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">

58 | P a g e
<h3>Titan Model#301</h3>
<p>Price:Rs.13000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/10.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#201</h3>
<p>Price:Rs.3000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/11.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>HMT Milan</h3>
<p>Price:Rs.8000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">

59 | P a g e
<imgsrc="img/12.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Faber Luba#111</h3>
<p>Price:Rs.18000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/8.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3> H&W </h3>
<p>Price:Rs.800.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/6.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Luis Phill</h3>

60 | P a g e
<p>Price:Rs.1000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/13.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>John Zok</h3>
<p>Price:Rs.1500.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/14.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Jhalsani</h3>
<p>Price:Rs.1300.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<footer>

61 | P a g e
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

<!--Latest compiled and minified JavaScript-->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">

62 | P a g e
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br>
<div class="container">
<div class="jumbotron">
<h1>Welcome to our Lifestyle Store!</h1>
<p>We have the best cameras, watches and shirts for you. No need to hunt
around, we
have all in one place.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">

63 | P a g e
<div class="thumbnail">
<imgsrc="img/5.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Cannon EOS</h3>
<p>Price:Rs.36000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/2.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.40000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/3.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.50000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>

64 | P a g e
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/4.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Olympus DSLR</h3>
<p>Price:Rs.80000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/9.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#301</h3>
<p>Price:Rs.13000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">

65 | P a g e
<imgsrc="img/10.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#201</h3>
<p>Price:Rs.3000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/11.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>HMT Milan</h3>
<p>Price:Rs.8000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/12.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Faber Luba#111</h3>
<p>Price:Rs.18000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>

66 | P a g e
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/8.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3> H&W </h3>
<p>Price:Rs.800.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/6.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Luis Phill</h3>
<p>Price:Rs.1000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">

67 | P a g e
<imgsrc="img/13.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>John Zok</h3>
<p>Price:Rs.1500.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/14.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Jhalsani</h3>
<p>Price:Rs.1300.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>

68 | P a g e
</body>
</html>
5. Cart html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

<!--Latest compiled and minified JavaScript-->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cart</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>

69 | P a g e
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br><br><br>
<div class="row decor_bg">
<div class="col-md-6 col-md-offset-3">
<table class="table table-striped">
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td><td>Total</td><td>Rs </td><td><a href='success.html'
class='btnbtn-primary'>Confirm Order</a></td>

70 | P a g e
</tr>
</tbody>
</table>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>
6. Setting html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

71 | P a g e
<!--Latest compiled and minified JavaScript-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Settings</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>

72 | P a g e
</nav><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
<h2>Change Password</h2>
<form>
<div class="form-group">
<input type="password" class="form-control" placeholder="Old Password"
name="Old password" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="New Password"
name="New password" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Re-type New
Password" name="Re-type New password" required = "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Submit</button>
</form>
</div>
</div>
</div><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>

73 | P a g e
</footer>
</body>
</html>
7. Success html:-
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Success</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"
type="text/javascript"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>
<style>
body {
font-family: 'Varela Round', sans-serif;
}
.modal-confirm {
color: #434e65;
width: 525px;

74 | P a g e
margin: 30px auto;
}
.modal-confirm .modal-content {
padding: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
}
.modal-confirm .modal-header {
background: #47c9a2;
border-bottom: none;
position: relative;
text-align: center;
margin: -20px -20px 0;
border-radius: 5px 5px 0 0;
padding: 35px;
}
.modal-confirm h4 {
text-align: center;
font-size: 36px;
margin: 10px 0;
}
.modal-confirm .form-control, .modal-confirm .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-confirm .close {
position: absolute;
top: 15px;

75 | P a g e
right: 15px;
color: #fff;
text-shadow: none;
opacity: 0.5;
}
.modal-confirm .close:hover {
opacity: 0.8;
}
.modal-confirm .icon-box {
color: #fff;
width: 95px;
height: 95px;
display: inline-block;
border-radius: 50%;
z-index: 9;
border: 5px solid #fff;
padding: 15px;
text-align: center;
}
.modal-confirm .icon-box i {
font-size: 64px;
margin: -4px 0 0 -4px;
}
.modal-confirm .btn {
color: #fff;
border-radius: 4px;
background: #eeb711;
text-decoration: none;
transition: all 0.4s;

76 | P a g e
line-height: normal;
border-radius: 30px;
margin-top: 10px;
padding: 6px 20px;
border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
background: #eda645;
outline: none;
}
.modal-confirm .btn span {
margin: 1px 3px 0;
float: left;
}
.modal-confirm .btni {
margin-left: 1px;
font-size: 20px;
float: right;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
</head>
<body>

<!-- Modal HTML -->

77 | P a g e
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons">&#xE876;</i>
</div>
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body text-center">
<h4>Success!</h4>
<p> Your order is confirmed. Thank you for shopping
with us.<a href="product.php"> Click here</a> to
purchase any other item.</p>
</div>
</div>
</div>

</body>
</html>
8. Style css:-
Code-
/*
external Style Sheet
*/
.banner-image{
padding-bottom: 75px;
margin-bottom: 50px;
text-align: center;

78 | P a g e
color: #f8f8f8;
background: url(img/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image{
padding-top: 12%;
width:80%;
margin:auto;
}
.banner-content{
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}

.items{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;

79 | P a g e
margin-left:1%;
}
.thumbnail{
display: block;
max-width: 100%;
height: auto;
}
.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{

padding: 10px 0;
background-color: #101010;
color:#9d9d9d;
bottom: 0;
width: 100%;
}

#image {
float: left;
padding: 0px 20px 20px20px;

80 | P a g e
Module 3
SQL:-

First we have create a database called ‘store’

The query will be :-

“Create database store;”

and create 3 tables in it

1.Items

2.Users

3. Users_items

Now create tables:

1 Items:-

The query will be:

“Create table items( PID int primary key auto_increment , Name varchar(255) not null
, Price int not null );”

Now insert values in it

The code will be

“Insert into items values (1,’Conon EOS’,36000 ); “

2. Users

The query will be:

“Create table users ( id int primary key auto_increment , Name varchar(255) not
null ,Email varchar(255) not null , Password varchar(255) not null , contact
varchar(255) not null , City varchar(255) not null , Address varchar(255) not null );”

3. Users_items: -

The query will be:“Create table users_items( id int primary key auto_increment ,
user_id int not null , item_id int not null , statusenum(‘Added to cart’,’Conformed’)
not null );”

81 | P a g e
Bibliography/ References

Information and data related to the project has been taken from the sources
below, special thanks to the editors for making the task easier:-

1) www.wikipedia .org/wiki/E-commerce
2) youtube
3) www.geeksforgeeks.org

82 | P a g e
4) Intershalla

83 | P a g e

You might also like