ABSRACT

Agri Shop is a very important feature used in web application to assist

people making purchases online, similar to the US English term ‘Agri
Shop’. The farmer -and-user can buying and selling product via same
platform. This system will increase the farmer’s sales and reducing the
user workload. This system is used to farmer and user. Farmer uploads
their product with details and buyers view these details and book that
product with in a time. Agriculture Management System is to help
farmers by providing all kinds agriculture related information in the
website. Agriculture Management System is farmer management website
application which helps farmers to give best-practice farming processes.
It helps farmers to improve their productivity and profitability. It enables
farmers to sell their productions through online and farmers can purchase
tools and seeds directly from seller

1
 CHAPTER 1

INTRODUCTION

1.1 OVERVIEW OF PROJECT

The name Agri Shop indicates Intelligent Agriculture.Agri Shop is a

model farmer management website application. This site helps the
farmers to sell their agricultural produce online and suggests best -in-
practice farming processes. Hence, providing a wider market and helping
them to not restrict themselves to the local market. This enables
wholesalers and retailers to expand their business.The main objective of
E-commerce applications for farmer and consumer project is to help the
farmers to increase the sales through online application. Any user can
purchase the available products in anywhere. This application helps
farmers a lot and keeps them in update.

E-commerce (electronic commerce or EC) is the buying and selling of

goods and services, or the transmitting of funds or data, over an electronic
network, primarily the Internet. These business transactions occur
business-to-business, business-to-consumer, consumer-to-consumer or
consumer-to-business. The terms e-commerce and e-business are often
used interchangeably. There are increasing numbers of educated peoples
in agriculture field and they started using smart phones in rural areas.
This application can make sharing of the information and knowledge
more effective way.

2
1.2 ABOUT THE PROJECT

This software aims to handle the records and documents, pictures

related to the sites and the informations stored in the system. This project
is broad and comprehensive that can meet all the requirements.

Using this project consultant can easily manage his office without facing
any sort of hasslement. There are lots and lots of paper work that comes
in the real estate consultant office everyday which need to be managed
and sort out for fulfilling the objectives. It becomes a cumbersome job to
handle all this in a manual system ad it can also lead to errors. Thus to
minimize this risk there is an intense need of an integrated system which
is fulfilled by this software application.

This latest proposed system makes the entire office work computerized
thus increasing the efficiency of work and reducing the need of

3
manpower. At the same time it also helps the consultant to manage the
daily operations easily and smoothly. Various modules are used for
fulfilling the diverse needs of the office works.

4
 CHAPTER 2

SYSTEM ANALYSIS

2. ANALYSIS OVERVIEW

System analysis is used in every field where something is

developed. It is a process of identifying our project goals and purposes
and to create the systems and procedures that will achieve them in an
efficient way.
The system analysis and designing are two main process before
developing the project because if these two step go wrong then the entire
project may go wrong because wrong design leads us to the wrong
product or system development.

2.1 EXISTING SYSTEM

In existing system shopping can done in a manual way, the customer has
to go for shopping, and then he is having the possibility to choose the
products whatever he wants, farmers will have to depend on intermediate
to sell the products and the intermediate will have good margin on those
products. There is no channel to farmer to sell there goods directly to
customer.

DISADVANTAGE

 It is a time consuming process.

 Thus, the system has to be automated.
5
2.2 PROPOSED SYSTEM

 Selling produce through online channels enables farmers to bypass

intermediaries, leading to improved income for the farmers,
reduced wastage and fresher produce for customers. These benefits
are particularly important in developing economies, where more
than 97% of people employed in agriculture live and where the
sector’s contribution to GDP is in double digits.
 Mobile operators have been central to the adoption of mobile-
enabled solutions in the agricultural sector and can continue this
role in agri e-commerce. In addition to providing extensive rural
connectivity and facilitating digital payments through mobile
money, mobile operators can leverage other strengths to drive the
scale and sustainability of agri e-commerce services. This is
possible through launching operator-led products, as well as
working in partnership with an existing agri e-commerce business.
 The App Contains the Login of user and farmer , the farmer list the
product and price of it, the user search the product he wants and
buys for himself directly from farmer once the order is made the
notification is sent to farmer to process an order, once delivery is
done and amount has been then it will be paid to the farmer.

ADVANTAGES

 Farmer can sales the good in online

 Commission cost for the farmer product will reduced

 Farmer can ship easily to the local address

6
2.3 FEASIBILITY STUDY

Preliminary investigation examine 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 running system.
All system is feasible if they are unlimited resources and infinite time.
There are aspects in the feasibility study portion of the preliminary
investigation:

 Technical Feasibility

 Operation Feasibility

 Economical Feasibility

TECHNICAL FEASIBILITY

The technical issue usually raised during the feasibility stage of the
investigation includes the following:

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

Earlier no system existed to cater to the needs of ‘Secure

Infrastructure Implementation System’. The current system developed is
7
technically feasible. It is a browser based user interface for audit
workflow. Thus it provides an easy access to the users. The database’s
purpose is to create, establish and maintain a workflow among various
entities in order to facilitate all concerned users in their various capacities
or roles. Permission to the users would be granted based on the roles
specified. Therefore, it provides the technical guarantee of accuracy,
reliability and security. The software and hard requirements for the
development of this project are not many and are already available or are
available as free as open source. The work for the project is done with the
current equipment and existing software technology. Necessary
bandwidth exists for providing a fast feedback to the users irrespective of
the number of users using the system.

OPERATIONAL FEASIBILITY

The analyst considers the extent the proposed system will fulfill his
departments. That is whether the proposed system covers all aspects of
the working system and whether it has considerable improvements. We
have found that the proposed “Secure file transaction” will certainly have
considerable improvements over the existing system.

ECONOMIC FEASIBILITY

The proposed system is economically feasible because the cost

involved in purchasing the hardware and the software are within
approachable. Working in this system need not required a highly qualified
professional. The operating-environment costs are marginal. The less time
involved also helped in its economical feasibility.

8
 CHAPTER 3

SYSTEM REQUIREMENT

3. REQUIREMENT

System requirement explains or describes the requirement of

developing the projects. The requirement is divides into two categories,
first is hardware requirements and configuration and second software
requirements and configuration. This is a pre-development process which
is needed to be verified before staring the project because if they doesn’t
match then the project outcomes may have issues or the development
process may be delay and interpreted in between.

3.1 HARDWARE REQUIREMENT

 Processor : Dual Core or Above

 Mother Board : Intel Family Motherboard

 RAM : 2 GB and Above

 Hard Disk : 300GB GB or Above

 Ethernet Card : 1Mbps Ethernet Card

 Processor : Dual Core or Above

 Other Accessories : Keyboard & Optical Mouse

9
3.2 SOFTWARE REQUIREMENT

 Front End : Html,Css, Javascript,Bootstrap,Jquery

 Back End : Php, MyMYSQL

 Operating System : Windows 7 or Above

 Development Tool : Visual Studio Code

 Web Server : Apache

 Web Browser : Mozilla Firefox / Chrome

10
 CHAPTER 4

SOFTWARE SPECIFICATION

7 SOFTWARE ENVIRONMENT

7.1 Introduction to PHP

PHP originally stand for Personal Home Page. Now PHP stands for PHP:
Hypertext Preprocessor (recursive acronym). PHP is the most popular and widely
used server side scripting language for web development.
The PHP Hypertext Preprocessor (PHP) is a programming language that
allows web developers to create dynamic content that interacts with databases. PHP is
basically used for developing web based software applications. Web portals, CMS,
LMS, E-Commerce Sites, Membership Sites and more.
PHP is a server-side scripting language designed for web development but
also used as a general-purpose programming language. PHP is now installed on more
than 244 million websites and 2.1 million web servers. PHP started out as a small
open source project that evolved as more and more people found out how useful it
was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994. Originally
created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now
produced by The PHP Group. While PHP originally stood for Personal Home Page, it
now stands for PHP: Hypertext Preprocessor, a recursive acronym.
7.2 PHP Works

11
 Fig. 7.1 PHP Process flow
7.3 PHP History
PHP (Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It was
initially developed for HTTP usage logging and server-side form generation in unix.
PHP 2(1995) transformed the language into a server-side embedded scripting
language. Added database support, file uploads, variables, arrays, recursive functions,
conditionals, iteration, regular expressions, etc.
PHP 3(1998) added support for ODBC data sources, multiple platform
support, email protocols (SNMP-Simple Network Management Protocol, IMAP-
Internet Message Access Protocol), and new parser written by Zeev Suraski and Andi
Gutmans.
PHP 4 (2000) became an independent component of the web server for added
efficiency. The parser was renamed the Zend Engine. Many security features were
added.
PHP 5 (2004) adds Zend engine II with object oriented programming, robust
XML support.
PHP grew in popularity, but did not become widely known until two program
developers named Zeev Suraski and Andi Gutmans, developed a new parser in the
summer of 1997, which led to the development of PHP 3.0.
The newest version out is PHP 5, which uses an engine developed by Suraski
and Gutmans, known as the Zend II Engine. (Zend I was used by PHP 4).
7.4 PHP File
 PHP files may contain text, HTML tags and scripts.

12
  PHP files returned to the browser as plain HTML.

 PHP files have a file extension of “.php”, “.php3”, or “.phtml”.

 PHP runs on different platforms (Windows, Linux, unix, etc).

 PHP is compatible with almost all servers used today (Apache, IIS,
etc.).

 PHP is FREE to download from the official on the server side.

 PHP is easy to learn and runs efficiently on the server side.

 PHP language features such as control structures, operators, variable

types, function declaration, class/object declaration are almost similar
to any compiled or interpreted language such as C or C++.

7.5 Personal Home Page

Server side Scripting
 Server side scripting in invisible to the user.
 Server side web scripting is mostly connecting web site to backend
servers, processing data, controlling the behavior.
 Server side scripting products consist of two main parts:
 Scripting language.
 Scripting engine (parses and interprets pages written in
the language).
 Server side- User fill out a form, e-mail is send via Simple Mail
Transfer Protocol (SMTP).
 Server side methods are a bit slower at run time.

Server side scripting applications

 Content Sites
 Community features (forums, bulletin boards etc)
 Email
 Customer support and technical support systems
 Surveys, polls and tests
13
  Filling out submitting forms online
 Games
 Any other application that to connect back end server (database,
LDAP-Lightweight Directory Access Protocol)

Common uses of PHP

 PHP performs system functions, i.e. from files on a system it can create, open,
read, write, and close them.
 PHP can handle forms, i.e. gather data from files, save data to a file, thru email
you can send data, return data to the user.
 You add, delete, and modify elements within your database thru PHP.
 Access cookies variables and set cookies.
 Using PHP, you can restrict users to access some pages of your website.
 It can encrypt data.

Characteristics of PHP

 Five important characteristics make PHP's practical nature possible:

 Simplicity
 Efficiency
 Security
 Flexibility
 Familiarity

7.6 Main Advantage of PHP program

Open Source
PHP is freely available for use. The community of open source PHP
developers provides technical support and is constantly improving updating the core
PHP functionalities. PHP is available at free of cost under PHP General Public
License and most of its associative required software's like MyMYSQL, Text Editors

14
and Apache Server are also freely available, so it proves very cost effective for the
developers.
Cross-Platform
PHP provides high compatibility with leading operating systems and web
servers such as thereby enabling it to be easily deployed across several different
platforms. PHP scripts can run across operating systems such as Linux, Windows,
Solaris, OpenBSD, Mac OSX etc and also provide support for all major web servers
such as Apache, IIS, iPlanet etc.
Power
Several web tasks can now be easily perform using PHP. For example now we
can develop from small websites to giant business and organizational websites,
informative forums, chatting platforms, CRM solutions, e-commerce shopping carts,
community websites, e-business, shopping carts and gigantic database driven sites.
User Friendly
Designed in a user friendly manner, PHP gives more flexibility than C, C++
and ASP and overall helps in increasing traffic to the site.
Quick
PHP is designed to work well with the web, and so things like accessing the
GET and POST and working with HTML and URLs are built-ins in the PHP
language. This makes it really concise and straightforward to make a website.
Extensions
Being an open source language, a large number of libraries and extensions, to
extend its core functionalities, are available for download. The source code of PHP
can be modified to include custom created extensions and components thereby
increasing its extensibility.
Easy Deployment
There are many hosting companies that will, for a few dollars a month, give
you a server running PHP so you can make a website really easily.
Automatically Refreshes
Nowadays developing dynamic websites are in the huge demand due to its
specific characteristics like it automatically refreshes and does not need to make much
changes manually.

15
Community Support
A huge advantage that PHP offers is its community. If you are looking for a
particular script, chances are another user has already created something similar.
Check within the PHP community for availability. Likewise, if you have created a
function that others might enjoy, be sure to post the code for others.
Other Tools
If you need to access other web based tools like Google maps (which is always
advisable for a business website), or any other, PHP makes it easy to access.
Security
PHP offers security as well that helps prevent malicious attacks. These
security levels can be adjusted in the .ini file.
Talent Availability
You can hire PHP programmers more easily than any other language
programmers since so many people know the language.
7.7 Introduction to MyMYSQL server
 MyMYSQL is a database server.

 MyMYSQL is ideal for both small and large applications

 MyMYSQL supports standard MYSQL

 MyMYSQL compiles on a number of platforms

 MyMYSQL is free to download and use.

PHP combined with MyMYSQL are cross-platform (develop in Windows and

serve on a Unix platform)

MyMYSQL, the most popular Open Source MYSQL database management

system, is developed, distributed, and supported by MyMYSQL AB. MyMYSQL AB
is a commercial company, founded by the MyMYSQL developers. It is a second
generation Open Source company that unites Open Source values and methodology
with a successful business model.

16
 The MyMYSQL Web site (http://www.myMYSQL.com/) provides the latest
information about MyMYSQL software and MyMYSQL AB.

 MyMYSQL is a database management system

A database is a structured collection of data. It may be anything from a

simple shopping list to a picture gallery or the vast amounts of information in
a corporate network. To add, access, and process data stored in a computer
database, you need a database management system such as MyMYSQL
Server. Since computers are very good at handling large amounts of data,
database management systems play a central role in computing, as standalone
utilities, or as parts of other applications.

 MyMYSQL is a relational database management system

A relational database stores data in separate tables rather than putting

all the data in one big storeroom. This adds speed and flexibility. The MYSQL
part of “MyMYSQL” stands for “Structured Query Language.” MYSQL is the
most common standardized language used to access databases and is defined
by the ANSI/ISO MYSQL Standard. The MYSQL standard has been evolving
since 1986 and several versions exist. In this manual, “MYSQL-92” refers to
the standard released in 1992, “MYSQL:1999” refers to the standard released
in 1999, and “MYSQL:2003” refers to the current version of the standard. We
use the phrase “the MYSQL standard” to mean the current version of the
MYSQL Standard at any time.

 MyMYSQL software is Open Source

Open Source means that it is possible for anyone to use and modify the
software. Anybody can download the MyMYSQL software from the Internet
and use it without paying anything.

Main features

17
 The following list describes some of the important characteristics of the
MyMYSQL Database Software.

Internals and Portability:

 Written in C and C++.

 Tested with a broad range of different compilers.
 Works on many different platforms.
 Uses GNU Automake, Autoconf, and Libtool for portability.
 APIs for C, C++, Eiffel, Java, Perl, PHP, Python, Ruby and Tcl are available,
API and libraries.
 Fully multi-threaded using kernel threads. It can easily use multiple CPUs if
they are available.
 Provides transactional and non-transactional storage engines.
 Uses very fast B-tree disk tables (MyISAM) with index compression.
 Relatively easy to add other storage engines. This is useful if you want to add
an MYSQL interface to an in-house database.
 A very fast thread-based memory allocation system.
 Very fast joins using an optimized one-sweep multi-join.
 In-memory hash tables, which are used as temporary tables.
 MYSQL functions are implemented using a highly optimized class library and
should be as fast as possible. Usually there is no memory allocation at all after
query initialization.
 The MyMYSQL code is tested with Purify (a commercial memory leakage
detector) as well as with Val grind, a GPL tool
(http://developer.kde.org/~sewardj/).

The server is available as a separate program for use in a client/server networked

environment. It is also available as a library that can be embedded (linked) into
standalone applications. Such applications can be used in isolation or in environments
where no network is available.
Primary Key

18
 Every table in MYSQL Server has a field or a combination of fields
that uniquely identifies each record in the table. The Unique identifier is
called the Primary Key, or simply the Key. The primary key provides the
means to distinguish one record from all other in a table. It allows the
user and the database system to identify, locate and refer to one particular
record in the database.

Relational Database

Sometimes all the information of interest to a business operation

can be stored in one table. MYSQL Server makes it very easy to link the
data in multiple tables. Matching an employee to the department in which
they work is one example. This is what makes MYSQL Server a
relational database management system, or RDBMS. It stores data in two
or more tables and enables you to define relationships between the table
and enables you to define relationships between the tables.

Foreign Key

When a field is one table matches the primary key of another field
is referred to as a foreign key. A foreign key is a field or a group of fields
in one table whose values match those of the primary key of another
table.

Referential Integrity

Not only does MYSQL Server allow you to link multiple tables, it
also maintains consistency between them. Ensuring that the data among
related tables is correctly matched is referred to as maintaining referential
integrity.

19
Data Abstraction

A major purpose of a database system is to provide users with an

abstract view of the data. This system hides certain details of how the
data is stored and maintained. Data abstraction is divided into three
levels. Physical level: This is the lowest level of abstraction at which one
describes how the data are actually stored. Conceptual Level: At this
level of database abstraction all the attributed and what data are actually
stored is described and entries and relationship among them. View level:
This is the highest level of abstraction at which one describes only part of
the database.

Advantages Of RDBMS

 Redundancy can be avoided

 Inconsistency can be eliminated

 Data can be Shared

 Standards can be enforced

 Security restrictions can be applied

 Integrity can be maintained

 Conflicting requirements can be balanced

 Data independence can be achieved.

Disadvantages Of DBMS

20
 A significant disadvantage of the DBMS system is cost. In
addition to the cost of purchasing of developing the software, the
hardware has to be upgraded to allow for the extensive programs and the
workspace required for their execution and storage. While centralization
reduces duplication, the lack of duplication requires that the database be
adequately backed up so that in case of failure the data can be recovered.

Features Of MYSQL Server (RDBMS)

MYSQL Server is one of the leading database management

systems (DBMS) because it is the only Database that meets the
uncompromising requirements of today’s most demanding information
systems. From complex decision support systems (DSS) to the most
rigorous online transaction processing (OLTP) application, even
application that require simultaneous DSS and OLTP access to the same
critical data, MYSQL Server leads the industry in both performance and
capability

MYSQL Server is a truly portable, distributed, and open DBMS

that delivers unmatched performance, continuous operation and support
for every database. MYSQL Server RDBMS is high performance fault
tolerant DBMS which is specially designed for online transactions
processing and for handling large database application. MYSQL
SERVER with transactions processing option offers two features which
contribute to very high level of transaction processing throughput, which
are the row level lock manager.

21
Microsoft Windows

Microsoft Windows commonly referred to as Windows, is a group

of several proprietary graphical operating system families, all of which
are developed and marketed by Microsoft. Each family caters to a certain
sector of the computing industry. Active Microsoft Windows families
include Windows NT and Windows IoT; these may encompass
subfamilies,

e.g. Windows Server or Windows Embedded Compact (Windows CE).

Defunct Microsoft Windows families include Windows 9x, Windows
Mobile and Windows Phone.

Microsoft introduced an operating environment named Windows

on November 20, 1985, as a graphical operating system shell for MS-
DOS in response to the growing interest in graphical user interfaces
(GUIs).4 Microsoft Windows came to dominate
the world's personal computer (PC) market with over 90% market share,
overtaking Mac OS, which had been introduced in 1984. Apple came to
see Windows as an unfair encroachment on their innovation in GUI
development as implemented on
products such as the Lisa and Macintosh (eventually settled in court in
Microsoft's favor in 1993). On PCs, Windows is still the most popular
operating system.
However, in 2014, Microsoft admitted losing the majority of the
overall operating system market to Android,5 because of the massive
growth in sales of Android smartphones. In 2014, the number of
Windows devices sold was less than 25% that of Android devices sold.
This comparison, however, may not be fully relevant, as the two
22
operating systems traditionally target different platforms. Still, numbers
for server use of Windows (that are comparable to competitors) show one
third market share, similar to that for end user use.

By marketing role
Microsoft, the developer of Windows, has registered several
trademarks, each of which denote a family of Windows operating systems
that target a specific sector of the computing industry. As of 2014, the
following Windows families were being actively developed:

Windows NT:
Started as a family of operating systems with Windows NT 3.1, an
operating system for server computers and workstations. It now consists
of three operating system subfamilies that are released almost at the same
time and share the same kernel:

Windows:
The operating system for mainstream personal computers, tablets
and smartphones. The latest version is

Windows 10:
The main competitor of this family is macOS by Apple for personal
computers and Android for mobile devices (c.f. Usage share of operating
systems § Market share by category).

Windows Server:
23
 The operating system for server computers. The latest version is
Windows Server 2019. Unlike its client sibling, it has adopted a strong
naming scheme. The main competitor of this family is Linux. (c.f. Usage
share of operating systems § Market share by category)

Windows PE:
A lightweight version of its Windows sibling, meant to operate as a
live operating system, used for installing Windows on bare-metal
computers (especially on many computers at once), recovery or
troubleshooting purposes. The latest version is Windows PE 10.

Windows IoT (previously Windows Embedded):

Initially, Microsoft developed Windows CE as a general-purpose
operating system for every device that was too resource-limited to be
called a full-fledged computer. Eventually, however, Windows CE was
renamed Windows Embedded Compact and was folded under Windows
Compact trademark which also consists of Windows Embedded Industry,
Windows Embedded Professional, Windows Embedded Standard,
Windows Embedded Handheld and Windows Embedded Automotive.8

Windows 9x:
An operating system that targeted consumers market. Discontinued
because of suboptimal performance. citation needed (PC World called its
last version, Windows Me, one of the worst products of all time.9)
Microsoft now caters to the consumer
market with Windows NT.

24
Windows Mobile:
The predecessor to Windows Phone, it was a mobile phone
operating system. The first version was called Pocket PC 2000; the third
version, Windows Mobile 2003 is the first version to adopt the Windows
Mobile trademark. The last version is Windows Mobile 6.5.

Windows Phone:
An operating system sold only to manufacturers of smartphones.
The first version was Windows Phone 7, followed by Windows Phone 8,
and the last version Windows Phone 8.1. It was succeeded by Windows
10 Mobile.

Windows 2.0
was released in December 1987, and was more popular than its
predecessor. It features several improvements to the user interface and
memory management. Windows 2.03 changed the OS from tiled windows
to overlapping windows. The result of this change led to Apple Computer
filing a suit against Microsoft alleging infringement on Apple's
copyrights. Windows 2.0 also introduced more sophisticated keyboard
shortcuts and could make use of expanded memory.

Windows 2.1
was released in two different versions: Windows/286 and Windows/386.
Windows/386 uses the virtual 8086 mode of the Intel 80386 to multitask
several DOS programs and the paged memory model to emulate
expanded memory using available extended memory. Windows/286, in
spite of its name, runs on both Intel 8086 and Intel 80286 processors. It
runs in real mode but can make use of the high memory area.citation
25
needed In addition to full Windows-packages, there were runtime-only
versions that shipped with early Windows software from third parties and
made it possible to run their Windows software on MS-DOS and without
the full Windows feature set. The early versions of Windows are often
thought of as graphical shells, mostly because they ran on top of MS-
DOS and use it for file system services. However, even the earliest
Windows versions already assumed many typical operating system
functions; notably, having their own executable file format and providing
their own device drivers (timer, graphics, printer, mouse, keyboard and
sound).
Unlike MS-DOS, Windows allowed users to execute multiple
graphical applications at the same time, through cooperative multitasking.
Windows implemented an elaborate, segment-based, software virtual
memory scheme, which allows it to run applications larger than available
memory: code segments and resources are swapped in and thrown away
when memory became scarce; data segments moved in memory when a
given application had relinquished processor control.
Windows 3.0,
released in 1990, improved the design, mostly because of virtual memory
and loadable virtual device drivers (VxDs) that allow Windows to share
arbitrary devices between multi-tasked DOS applications.citation needed
Windows 3.0 applications can run in protected mode, which gives them
access to several megabytes of memory without the obligation to
participate in the software virtual memory scheme. They run inside the
same address space, where the segmented memory provides a degree of
protection. Windows 3.0 also featured improvements to the user interface.
Microsoft rewrote critical operations from C into assembly. Windows 3.0

26
is the first Microsoft Windows version to achieve broad commercial
success, selling 2 million copies in the first six months.

Windows 3.1,
made generally available on March 1, 1992, featured a facelift. In August
1993, Windows for Workgroups, a special version with integrated peer-
to-peer networking features and a version number of 3.11, was released.
It was sold along with Windows 3.1. Support for Windows 3.1 ended on
December 31, 2001.

Windows 3.2,
released 1994, is an updated version of the Chinese version of Windows
3.1.19 The update was limited to this language version, as it fixed only
issues related to the complex writing system of the Chinese language.
Windows 3.2 was generally sold by computer manufacturers with a ten-
disk version of MS-DOS that also had Simplified Chinese characters in
basic output and some translated utilities.

Windows 9x
The next major consumer-oriented release of Windows, Windows
95, was released on August 24, 1995. While still remaining MS-DOS-
based, Windows 95 introduced support for native 32-bit applications,
plug and play hardware, preemptive multitasking, long file names of up
to 255 characters, and provided increased stability over its predecessors.
Windows 95 also introduced a redesigned, object oriented user interface,
replacing the previous Program Manager with the Start menu, taskbar,
and Windows Explorer shell. Windows 95 was a major commercial
success for Microsoft; Ina Fried of CNET remarked that "by the time
27
Windows 95 was finally ushered off the market in 2001, it had become a
fixture on computer desktops around the world."21 Microsoft published
four OEM Service Releases (OSR) of Windows 95, each of which was
roughly equivalent to a service pack. The first OSR of Windows 95 was
also the first version of Windows to be bundled with Microsoft's web
browser, Internet Explorer.22 Mainstream support for Windows 95 ended
on December 31, 2000, and extended support for Windows 95 ended on
December 31, 2001.23

Windows 95,
was followed up with the release of Windows 98 on June 25, 1998, which
introduced the Windows Driver Model, support for USB composite
devices, support for ACPI, hibernation, and support for multi-monitor
configurations. Windows 98 also included integration with Internet
Explorer 4 through Active Desktop and other aspects of the Windows
Desktop Update (a series of enhancements to the Explorer shell which
were also made available for Windows 95). In May 1999, Microsoft
released Windows 98 Second Edition, an updated version of Windows 98.
Windows 98 SE added Internet Explorer 5.0 and Windows Media Player
6.2 amongst other upgrades. Mainstream support for Windows 98 ended
on June 30, 2002, and extended support for Windows 98 ended on July
11, 2006.the Virtual File System for Git (VFSForGit) to address these
challenges.
 Timeline of releases
 Table of Windows versions
 Windows timeline: Bar chart
 The Windows family tree
 Usage share and device sales
28
Market share overview
According to Net Applications and StatCounter data from
November 2019
Desktop OS Net Applications StatCounter
older versions 0.00% 0.04%
Windows XP 1.85% 1.00%
Windows Vista 0.15% 0.24%
Windows 7 26.86% 21.19%
Windows 8 0.55% 0.94%
Windows 8.1 3.32% 3.84%
Windows 10 53.33% 49.95%
All versions 86.06% 77.21%
Mobile OS Net Applications Stat Counter
All versions 0.02% 0.15%

According to Net Applications, which tracks the use of operating

systems in devices that are active on the Web, Windows was the most
used operating-system family on personal computers in July 2017, with
close to 90% usage share.60 Including personal computers of all kinds
(e.g., desktops, laptops, mobile devices), Windows OSes accounted for
35.24% of usage share

Security
Consumer versions of Windows were originally designed for ease-
of-use on a single-user PC without a network connection, and did not
have security features built in from the outset. However, Windows NT
and its successors are designed for security (including on a network) and
multi-user PCs, but were not initially designed with Internet security in
mind as much,since, when it was first developed in the early 1990s,
Internet use was less prevalent.69

29
 These design issues combined with programming errors (e.g. buffer
overflows) and the popularity of Windows means that it is a frequent
target of computer worm and virus writers. In June 2005, Bruce
Schneier's Counterpane Internet Security reported
that it had seen over 1,000 new viruses and worms in the previous six
months.70 In 2005, Kaspersky Lab found around 11,000 malicious
programs—viruses, Trojans, back-doors, and exploits written for
Windows.

This system varies from other vendor products such as Linux and
NetWare due to the 'static' allocation of permission being applied
directory to the file or folder. However using this process of AGLP/
AGDLP/ AGUDLP allows a small number of static permissions to be
applied and allows for easy changes to the account groups without
reapplying the file permissions on the files and folders.

Windows 7
Windows7 is a personal computer operating system that was
produced by Microsoft as part of the Windows NT family of operating
systems. It was released to manufacturing on July 22, 2009, and became
generally available on October 22, 2009,9 less than three years after the
release of its predecessor, Windows Vista. Windows 7's server
counterpart, Windows Server 2008 R2, was released at the same time.
Microsoft ended mainstream support for Windows 7 on January 13, 2015,
but extended support will not end until January 14, 2020.

30
 Windows7 was primarily intended to be an incremental upgrade to
Microsoft Windows, intended to address Windows Vista's poor critical
reception while maintaining hardware and software compatibility.
Windows 7 continued improvements on Windows Aero (the user interface
introduced in Windows Vista) with the addition of a redesigned taskbar
that allows applications to be "pinned" to it, and new window
management features.

Other new features were added to the operating system, including

libraries, the new file sharing system HomeGroup, and support for
multitouch input. A new "Action Center" interface was also added to
provide an overview of system security and maintenance information, and
tweaks were made to the User Account Control system to make it less
intrusive. Windows 7 also shipped with updated versions of several stock
applications, including Internet Explorer 8, Windows Media Player, and
Windows Media Center.

Features
Among Windows 7's new features are advances in touch and
handwriting recognition,45 support for virtual hard disks,46 improved
performance on multi-core processors,47484950 improved boot
performance, Direct Access, and kernel
Improvements. Windows 7 adds support for systems using multiple
heterogeneous graphics cards from different vendors (Heterogeneous
Multi-adapter), a new version of Windows Media Center, a Gadget for
Windows Media Center, improved media features, XPS Essentials Pack
and Windows PowerShell being included, and a redesigned Calculator
with multiline capabilities including Programmer and Statistics modes
31
along with unit conversion for length, weight, temperature, and several
others.
Many new items have been added to the Control Panel, including
Clear Type Text Tuner56 Display Color Calibration Wizard, Gadgets,
Recovery, Troubleshooting, Workspaces Center, Location and Other
Sensors, Credential Manager, Biometric Devices, System Icons, and
Display. Windows Security Center has been renamed to Windows Action
Center (Windows Health Center and Windows Solution Center in earlier
builds), which encompasses both security and maintenance of the
computer.
ReadyBoost on 32-bit editions now supports up to gigabytes of
extra allocation. Windows 7 also supports images in RAW image format
through the addition of Windows Imaging Component-enabled image
decoders, which enables raw image thumbnails, previewing and metadata
display in Windows Explorer, plus full-size viewing and slideshows in
Windows Photo Viewer and Windows Media Center.59 Windows 7 also
has a native TFTP client with the ability to transfer files to or from a
TFTP server.60 The default taskbar of Windows 7.

Windows 8
Windows 8 is a personal computer operating system that was
produced by Microsoft as part of the Windows NT family of operating
systems. The operating system was released to manufacturing on August
1, 2012, with general availability on October 26, 2012.Windows 8
introduced major changes to the operating system's platform and user
interface to improve its user experience on tablets, where Windows was
now competing with mobile operating systems, including Android and
iOS.6 In particular, these changes included a touch-optimized Windows
32
shell based on Microsoft's "Metro" design language, the Start screen
(which displays programs and dynamically updated content on a grid of
tiles), a new platform for developing "apps" with an emphasis on
touchscreen input, integration with online services (including the ability
to synchronize apps and settings between devices), and Windows Store,
an online store for downloading and purchasing new software.

Windows 8 added support for USB 3.0, Advanced Format hard

drives, near field communications, and cloud computing. Additional
security features were introduced, such as built-in antivirus software,
integration with Microsoft Smart Screen phishing filtering service and
support for UEFI Secure Boot on supported devices with UEFI firmware,
to prevent malware from infecting the boot process.

Windows 8 Early
Windows 8 development started before Windows 7 had shipped in
2009. At the Consumer Electronics Show in January 2011, it was
announced that the next version of Windows would add support for ARM
system-on-chips alongside the existing
x86 processors produced by vendors, especially AMD and Intel.
Windows division president Steven Sinofsky demonstrated and early
build of the port on prototype devices, while Microsoft CEO Steve
Ballmer announced the company's goal for Windows to be "everywhere
on every kind of device without compromise."

Details also began to surface about a new application framework

for Windows 8 codenamed "Jupiter", which would be used to make
"immersive" applications using XAML (similarly to Windows Phone and
33
Silverlight) that could be distributed via a new packaging system and a
rumored application store.19 Three milestone releases of Windows 8
leaked to the general public. Milestone 1, Build 7850, was leaked on
April 12, 2011.20 It was the first build where the text of a window was
written centered instead of aligned to the left.

Previews
Microsoft unveiled more Windows 8 features and improvements on
the first day of the Build conference on September 13, 2011.27 Microsoft
released the first public beta build of Windows 8, Windows Developer
Preview (build 8102) at the event. A Samsung tablet running the build
was also distributed to conference attendees.

The build was released for download later in the day in standard
32-bit and 64-bit versions, plus a special 64-bit version which included
SDKs and developer tools (Visual Studio Express and Expression Blend)
for developing Metro-style apps.28 The Windows Store was announced
during the presentation, but was not available in this build.2930
According to Microsoft, there were about 535,000 downloads of the
developer preview within the first 12 hours of its release.

Safety and security

New security features in Windows 8 include two new
authentication methods tailored towards touchscreens (PINs and picture
passwords),74 the addition of antivirus capabilities to Windows Defender
(bringing it in parity with Microsoft Security Essentials).75 SmartScreen
filtering integrated into Windows,76 Family Safety offers Parental
controls, which allows parents to monitor and manage their children's
34
activities on a device with activity reports and safety controls.777879
Windows 8 also provides integrated system recovery through the new
"Refresh" and "Reset" functions,80 including system recovery from USB
drive.81 Windows 8's first security patches would be released on
November 13, 2012; it would contain three fixes deemed "critical" by the
company.

Windows 8 supports a feature of the UEFI specification known as

"Secure boot", which uses a public-key infrastructure to verify the
integrity of the operating system and prevent unauthorized programs such
as bootkits from infecting the device's boot process.83 Some pre-built
devices may be described as "certified" by Microsoft; these must have
secure boot enabled by default, and provide ways for users to disable or
re-configure the feature. ARM-based Windows RT devices must have
secure boot permanently enabled.

Online services and functionality

Windows 8 provides heavier integration with online services from
Microsoft and others. A user can now log into Windows with a Microsoft
account, which can be used to access services and synchronize
applications and settings between devices. Windows 8 also ships with a
client app for Microsoft's SkyDrive cloud storage service, which also
allows apps to save files directly to SkyDrive. A SkyDrive client for the
desktop and File Explorer is not included in Windows 8, and must be
downloaded separately.

Bundled multimedia apps are provided under the Xbox brand,

including Xbox Music, Xbox Video, and the Xbox SmartGlass
35
companion for use with an Xbox 360 console. Games can integrate into
an Xbox Live hub app, which also allows users to view their profile and
gamerscore.88 Other bundled apps provide the ability to link Flickr and
Facebook.89 Due to Facebook Connect service changes, Facebook
support is disabled in all bundled apps effective June 8, 2015.90Internet
Explorer 10 is included as both a desktop program and a touch-optimized
app, and includes increased support for HTML5, CSS3, and hardware
acceleration.

The Internet Explorer app does not support plugins or ActiveX

components, but includes a version of Adobe Flash Player that is
optimized for touch and low power usage. Initially, Adobe Flash would
only work on sites included on a "Compatibility View" whitelist;
however, after feedback from users and additional compatibility tests, an
update in March 2013 changed this behavior to use a smaller blacklist of
sites with known compatibility issues instead, allowing Flash to be used
on most sites by default.91 The desktop version does not contain these
limitations.

Web browsers
Exceptions to the restrictions faced by Windows Store apps are
given to web browsers. The user's default browser can distribute a Metro-
style web browser in the same package as the desktop version, which has
access to functionality unavailable to other apps, such as being able to
permanently run in the background, use multiple background processes,
and use Windows API code instead of WinRT (allowing for code to be re-
used with the desktop version, while still taking advantage of features
available to Windows Store apps, such as charms).
36
 Microsoft advertises this exception privilege "New experience
enabled" (formerly "Metro-style enabled").The developers of both
Chrome and Firefox committed to developing Metro-style versions of
their browsers; while Chrome's "Windows 8 mode" (discontinued on
Chrome version 49) uses a full-screen version of the existing desktop
interface, Firefox's.

Interface and desktop

Windows 8 introduces significant changes to the operating system's
user interface, many of which are aimed at improving its experience on
tablet computers and other touchscreen devices. The new user interface is
based on Microsoft's Metro design language and uses a Start screen
similar to that of Windows Phone 7 as the primary means of launching
applications. The Start screen displays a customizable array of tiles
linking to various apps and desktop programs, some of which can display
constantly updated information and content through "live tiles".94 As a
form of multi-tasking, apps can be snapped to the side of a screen.94
Alongside the traditional Control Panel, a new simplified and touch-
optimized settings app known as "PC Settings" is used for basic
configuration and user settings. It does not include many of the advanced
options still accessible from the normal Control Panel.

Windows 10
Windows 10 is a series of personal computer operating systems
produced by Microsoft as part of its Windows NT family of operating
systems. It is the successor to Windows 8.1, and was released to
manufacturing on July 15, 2015, and broadly released for retail sale on
July 29, 2015.14 Windows 10 receives new builds on an ongoing basis,
37
which are available at no additional cost to users, in addition to additional
test builds of Windows 10 which are available to Windows Insiders. The
latest stable build of Windows 10 is Version 1909 (November 2019
Update). Devices in enterprise environments can receive these updates at
a slower pace, or use long-term support milestones that only receive
critical updates, such as security patches, over their ten-year lifespan of
extended support.
One of Windows 10's most notable features is its support for
universal apps, an expansion of the Metro-style apps first introduced in
Windows 8. Universal apps can be designed to run across multiple
Microsoft product families with nearly identical code‍—‌including PCs,
tablets, smartphones, embedded systems, Xbox One, Surface Hub and
Mixed Reality. The Windows user interface was revised to handle
transitions between a mouse-oriented interface and a touchscreen-
optimized interface based on available input devices‍—‌particularly on 2-
in-1 PCs, both interfaces include an updated Start menu which
incorporates elements of Windows 7's traditional Start menu with the tiles
of Windows 8. Windows 10 also introduced the Microsoft Edge web
browser, a virtual desktop system, a window and desktop management
feature called Task View, support for fingerprint and face recognition
login, new security features for enterprise environments, and DirectX.

Windows 10 Development
At the Microsoft Worldwide Partner Conference in 2011, Andrew
Lees, the chief of Microsoft's mobile technologies, said that the company
intended to have a single software ecosystem for PCs, phones, tablets,
and other devices. "We won't have an

38
ecosystem for PCs, and one for phones, and one for tablets‍—‌they'll all
come together. In December 2013, technology writer Mary Jo Foley
reported that Microsoft was working on an update to Windows 8
codenamed "Threshold", after a planet in Microsoft's Halo video game
franchise.

Similarly to "Blue" (which became Windows 8.1), Foley called

Threshold a "wave of operating systems" across multiple Microsoft
platforms and services, scheduled for the second quarter of 2015. Foley
reported that among the goals for Threshold was to create a unified
application platform and development toolkit for Windows, Windows
Phone and Xbox One (which all use a similar Windows NT kernel)

Hypertext Markup Language (HTML)

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

Web browsers receive HTML documents from a web server or

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

HTML elements are the building blocks of HTML pages. With

HTML constructs, images and other objects such as interactive forms

39
may be embedded into the rendered page. HTML provides a means to
create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img /> and <input /> directly
introduce content into the page. Other
tags such as <p> surround and provide information about document text
and may include other tags as sub-elements.

Browsers do not display the HTML tags, but use them to interpret
the content of the page.HTML can embed programs written in a scripting
language such as JavaScript, which affects the behavior and content of
web pages. Inclusion of CSS defines the look and layout of content. The
World Wide Web Consortium (W3C), former maintainer of the HTML
and current maintainer of the CSS standards, has encouraged the use of
CSS over explicit .resentational HTML since 1997.

Development
In 1980, physicist Tim Berners-Lee, a contractor at CERN,
proposed and prototyped ENQUIRE, a system for CERN researchers to
use and share documents. In 1989, Berners-Lee wrote a memo proposing
an Internet-based hypertext system.3 Berners-Lee specified HTML and
wrote the browser and server software in late 1990. That year, Berners-
Lee and CERN data systems engineer Robert Cailliau collaborated on a
joint request for funding, but the project was not formally adopted by
CERN.
In his personal notes4 from 1990 he listed5 "some of the many
areas in which hypertext is used" and put an encyclopedia first. The first
40
publicly available description of HTML was a document called "HTML
Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991.67
It describes elements comprising the initial, relatively simple design of
HTML. Except for the hyperlink tag, these were strongly influenced by
SGMLguid, an in-house Standard Generalized Markup Language
(SGML)-based documentation format at CERN. Eleven of these elements
still exist in HTML 4

HTML is a markup language that web browsers use to interpret and

compose text, images, and other material into visual or audible web
pages. Default characteristics for every item of HTML markup are
defined in the browser, and these characteristics can be altered or
enhanced by the web page designer's additional use of CSS. Many of the
text elements are found in the 1988 ISO technical report TR 9537
Techniques for using SGML, which in turn covers the features of early
text formatting languages such as that used by the RUNOFF command
developed in the early 1960s for the CTSS (Compatible Time-Sharing
System) operating system: these formatting commands were derived from
the commands used by typesetters to manually format documents.
However, the SGML concept of generalized markup is based on elements
(nested annotated ranges with attributes) rather than merely print effects,
with also the separation of structure and markup; HTML has been
progressively moved in this direction with CSS.

Berners-Lee considered HTML to be an application of SGML. It

was formally defined as such by the Internet Engineering Task Force
(IETF) with the mid-1993 publication of the first proposal for an HTML
specification, the "Hypertext Markup Language (HTML)" Internet Draft
41
by Berners-Lee and Dan Connolly, which included an SGML Document
type definition to define the grammar.910 The draft expired after six
months, but was notable for its acknowledgment of the NCSA Mosaic
browser's custom tag for embedding in-line images, reflecting the IETF's
philosophy of basing standards on successful prototypes.

Similarly, Dave Raggett's competing Internet-Draft, "HTML+

(Hypertext Markup Format)", from late 1993, suggested standardizing
already-implemented features like tables and fill-out forms.After the
HTML and HTML+ drafts expired in early 1994, the IETF created an
HTML Working Group, which in 1995 completed "HTML 2.0", the first
HTML specification intended to be treated as a standard against which
future implementations should be based.Further development under the
auspices of the IETF was stalled by competing interests. Since 1996, the
HTML specifications have been maintained, with input from commercial
software vendors, by the World Wide Web Consortium (W3C).

HTML versions timeline

HTML 2
November 24, 1995, HTML 2.0 was published as RFC 1866.
Supplemental RFCs added capabilities:
November 25, 1995: RFC 1867 (form-based file upload)
May 1996: RFC 1942 (tables)
August 1996: RFC 1980 (client-side image maps)
January 1997: RFC 2070 (internationalization)

HTML 3
42
 January 14, 1997, HTML 3.215 was published as a W3C
Recommendation. It was the first version developed and standardized
exclusively by the W3C, as the IETF had closed its HTML Working
Group on September 12, 1996. Initially code-named "Wilbur",17 HTML
3.2 dropped math formulas entirely, reconciled overlap among various
proprietary extensions and adopted most of Netscape's visual markup
tags. Netscape's blink element and Microsoft's marquee element were
omitted due to a mutual agreement between the two companies. A
markup for mathematical formulas similar to that in HTML was not
standardized until months later in MathML.

HTML 4
December 18, 1997, HTML 4.018 was published as a W3C
Recommendation. It offers three variations:
 Strict, in which deprecated elements are forbidden
 Transitional, in which deprecated elements are allowed
 Frameset, in which mostly only frame related elements are
allowed.

Initially code-named "Cougar",17 HTML 4.0 adopted many browser-

specific element types and attributes, but at the same time sought to phase
out Netscape's visual markup features by marking them as deprecated in
favor of style sheets.
HTML 4 is an SGML application conforming to ISO 8879 – SGML.

HTML 5

43
 October 28, 2014 HTML524 was published as a W3C
Recommendation.25 November 1, 2016 HTML 5.126 was published as a
W3C Recommendation.2728
December 14, 2017 HTML 5.229 was published as a W3C
Recommendation.3031

HTML draft version timeline

October 1991, HTML Tags,6 an informal CERN document listing
18 HTML tags, was first mentioned in public. June 1992, First informal
draft of the HTML DTD,32 with seven333435 subsequent revisions (July
15, August 6, August 18, ovember 17, November 19, November 20,
November 22)November 1992 HTML DTD 1.1 (the first with a version
number, based on RCS revisions, which start with 1.1 rather than 1.0), an
informal draft35June 1993

Hypertext Markup Language36 was published by the IETF IIIR

Working Group as an Internet Draft (a rough proposal for a standard). It
was replaced by a second version37 one month later. November 1993

Markup
HTML markup consists of several key components, including those
called tags (and their attributes), character-based data types, character
references and entity references. HTML tags most commonly come in
pairs like <h1> and </h1>, although some represent empty elements and
so are unpaired, for example <img>. The first tag in such a pair is the
start tag, and the second is the end tag (they are also called opening tags
and closing tags). Another important component is the HTML document
type declaration, which triggers standards mode rendering.
44
  The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content.
 The markup text <title>This is a title</title> defines the browser
page title.
 The Document Type Declaration <!DOCTYPE html> is for
HTML5. If a declaration is not included, various browsers will
revert to "quirks mode" for rendering

Elements
HTML documents imply a structure of nested HTML elements.
These are indicated in the document by HTML tags, enclosed in angle
brackets thus: <p>.70better source needed

In the simple, general case, the extent of an element is indicated by

a pair of tags: a "start tag" <p> and "end tag" </p>. The text content of
the element, if any, is placed between these tags.

Tags may also enclose further tag markup between the start and
end, including a mixture of tags and text. This indicates further (nested)
elements, as children of the parent element.

The start tag may also include attributes within the tag. These
indicate other information, such as identifiers for sections within the
document, identifiers used to bind style information to the presentation of
the document, and for some tags such as
the <img> used to embed images, the reference to the image
resource.Some elements, such as the line break <br>, do not permit any
45
embedded content, either text or further tags. These require only a single
empty tag (akin to a start tag) and do not use an end tag.

Many tags, particularly the closing end tag for the very commonly
used paragraph element <p>, are optional. An HTML browser or other
agent can infer the closure for the end of an element from the context and
the structural rules defined by the
HTML standard. These rules are complex and not widely understood by
most HTML coders.The general form of an HTML element is therefore:
<tag attribute1="value1" attribute2="value2">''content''</tag>. Some
HTML elements are defined as empty elements and take the form <tag
attribute1="value1" attribute2="value2">. Empty
elements may enclose no content, for instance, the <br> tag or the inline
<img> tag. The name of an HTML element is the name used in the tags.
Note that the end tag's name is preceded by a slash character, /, and that in
empty elements the end tag is neither required nor allowed. If attributes
are not mentioned, default values are used in each case.

Structural markup indicates the purpose of text For example,

<h2>Golf</h2> establishes "Golf" as a second-level heading. Structural
markup does not denote any specific rendering, but most web browsers
have default styles for element formatting. Content may be further styled
using Cascading Style Sheets (CSS).

Presentational markup indicates the appearance of the text, regardless of

its purpose

46
 For example, <b>boldface</b> indicates that visual output devices
should render "boldface" in bold text, but gives little indication what
devices that are unable to do this (such as aural devices that read the text
aloud) should do. In the case of both <b>bold</b> and <i>italic</i>,
there are other elements that may have equivalent visual renderings but
that are more semantic in nature, such as <strong>strong text</strong>
and <em>emphasized text</em> respectively. It is easier to see
how an aural user agent should interpret the latter two elements.
However, they are not equivalent to their presentational counterparts: it
would be undesirable for a screen-reader to emphasize the name of a
book, for instance, but on a screen such
a name would be italicized. Most presentational markup elements have
become deprecated under the HTML 4.0 specification in favour of using
CSS for styling.

Attributes
Most of the attributes of an element are name-value pairs, separated
by = and written within the start tag of an element after the element's
name. The value may be enclosed in single or double quotes, although
values consisting of certain characters can be left unquoted in HTML (but
not XHTML). Leaving attribute values unquoted is considered unsafe.In
contrast with name-value pair attributes, there are some attributes that
affect the element simply by their presence in the start tag of
the element,6 like the ismap attribute for the img element. There are
several common attributes that may appear in many elements :

The id attribute provides a document-wide unique identifier for an

element. This is used to identify the element so that stylesheets can alter
47
its presentational properties, and scripts may alter, animate or delete its
contents or presentation.

Appended to the URL of the page, it provides a globally unique

identifier for the element, typically a sub-section of the page. The class
attribute provides a way of classifying similar elements. This can be used
for semantic or presentation purposes.
For example, an HTML document might semantically use the designation
<class="notation"> to indicate that all elements with this class value are
subordinate to the main text of the document.

In presentation, such elements might be gathered together and

presented as footnotes on a page instead of appearing in the place where
they occur in the HTML source. Class attributes are used semantically in
microformats. Multiple class values may be specified; for example
<class="notation important"> puts the element into both the notation and
the important classes.

An author may use the style attribute to assign presentational

properties to a particular element. It is considered better practice to use an
element's id or class attributes to select the element from within a
stylesheet, though sometimes this can be
too cumbersome for a simple, specific, or ad hoc styling. The title
attribute is used to attach subtextual explanation to an element. In most
browsers this attribute is displayed as a tooltip.

48
The lang attribute identifies the natural language of the element's
contents, which may be different from that of the rest of the document.
For example, in an English-language document:

<p>Oh well, <span lang="fr">c'est la vie</span>, as they say in

France.</p>

The abbreviation element, abbr, can be used to demonstrate some

of these attributes:

<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext

Markup Language">HTML</abbr>

This example displays as HTML; in most browsers, pointing the

cursor at the abbreviation should display the title text "Hypertext Markup
Language." Most elements take the language-related attribute specify text
direction, such as with "rtl" for right-to-left text in, for example, Arabic,
Persian or Hebrew.

Character and entity references

As of version 4.0, HTML defines a set of 252 character entity
references and a set of 1,114,050 numeric character references, both of
which allow individual characters to be written via simple markup, rather
than literally. A literal character and its markup counterpart are
considered equivalent and are rendered identically.

The ability to "escape" characters in this way allows for the

characters < and & (when written as &lt; and &amp;, respectively) to be
49
interpreted as character data, rather than markup. For example, a literal <
normally indicates the start of a tag, and &
normally indicates the start of a character entity reference or numeric
character reference; writing it as &amp; or &#x26; or &#38; allows & to
be included in the content of an element or in the value of an attribute.
The double-quote character ("), when not used to quote an attribute value,
must also be escaped as &quot; or &#x22; or &#34; when it appears
within the attribute value itself. Equivalently, the single-quote character
('), when not used to quote an attribute value, must also be
escaped as &#x27; or &#39; (or as &apos; in HTML5 or XHTML
documents7778) when it appears within the attribute value itself. If
document authors overlook the need to escape such characters, some
browsers can be very forgiving and try to use context to guess their intent.

The result is still invalid markup, which makes the document less
accessible to other browsers and to other user agents that may try to parse
the document for search and indexing purposes for example.Escaping
also allows for characters that are not easily typed, or that are not
available in the document's character encoding, to be epresented within
element and attribute content. For example, the acute-accented e (é), a
character typically found only on Western European and South American
keyboards, can be written in any HTML document as the entity reference
&eacute; or as the numeric references &#xE9; or &#233;, using
characters that are available on all keyboards and are supported in all
character encodings. Unicode character encodings such as UTF-8 are
compatible with all modern browsers and allow direct access to almost all
the visually impaired user's time by reading out repeated or irrelevant
information when it has been marked up correctly.
50
HTTP
The World Wide Web is composed primarily of HTML documents
transmitted from web servers to web browsers using the Hypertext
Transfer Protocol. However, HTTP is used to serve images, sound, and
other content, in addition to HTML. To allow the web browser to know
how to handle each document it receives, other information is transmitted
along with the document. This meta data usually includes the MIME type
(e.g., text/html or application/xhtml+xml)and the character encoding.
In modern browsers, the MIME type that is sent with the HTML
document may affect how the document is initially interpreted. A
document sent with the XHTML MIME type is expected to be well-
formed XML; syntax errors may cause the browser to fail
to render it. The same document sent with the HTML MIME type might
be displayed successfully, since some browsers are more lenient with
HTML.
The W3C recommendations state that XHTML 1.0 documents that
follow guidelines set forth in the recommendation's Appendix C may be
labeled with either MIME Type.86 XHTML 1.1 also states that XHTML
1.1 documents should87 be
labeled with either MIME type.

HTML e-mail
Most graphical email clients allow the use of a subset of HTML
(often ill-defined) to provide formatting and semantic markup not
available with plain text. This may include typographic information like
coloured headings, emphasized and quoted text, inline images and
diagrams. Many such clients include both a GUI editor for composing
51
HTML e-mail messages and a rendering engine for displaying them. Use
of HTML in e-mail is criticized by some because of compatibility issues,
because it can help disguise phishing attacks, because of accessibility
issues for blind or visually impaired people, because it can confuse spam
filters and because the message size is larger than plain text.Naming
conventions

The most common filename extension for files containing HTML

is .html. A common abbreviation of this is .htm, which originated because
some early operating systems and file systems, such as DOS and the
limitations imposed by FAT data structure, limited file extensions to three
letters. An HTML Application (HTA; file extension ".hta") is a Microsoft
Windows application that uses HTML and Dynamic HTML in a
browser to provide the application's graphical interface.

SGML-based versus XML-based HTML

One difference in the latest HTML specifications lies in the
distinction between the SGML-based specification and the XML-based
specification. The XML-based specification is usually called XHTML to
distinguish it clearly from the more traditional definition. However, the
root element name continues to be "html" even in the XHTML-specified
HTML. The W3C intended XHTML 1.0 to be identical to HTML 4.01
except where limitations of XML over the more complex SGML require
workarounds. Because XHTML and HTML are closely related, they are
sometimes documented in parallel. In such circumstances, some authors
conflate the two names as (X)HTML or X(HTML).

52
 Like HTML 4.01, XHTML 1.0 has three sub-specifications: strict,
transitional and frameset.Aside from the different opening declarations
for a document, the differences between an HTML 4.01 and XHTML 1.0
document—in each of the corresponding DTDs—are largely syntactic.
The underlying syntax of HTML allows many shortcuts that XHTML
does not, such as elements with optional opening or closing tags, and
even empty elements which must not have an end tag. By contrast,
XHTML requires all elements to have an opening tag and a closing tag.
XHTML, however, also introduces a new shortcut: an XHTML tag
may be opened and closed within the same tag, by including a slash
before the end of the tag like this: <br/>. The introduction of this
shorthand, which is not used in the SGML declaration for HTML 4.01,
may confuse earlier software unfamiliar with this new convention. A fix
for this is to include a space before closing the tag, as such: <br />.

To understand the subtle differences between HTML and XHTML,

consider the transformation of a valid and well-formed XHTML 1.0
document that adheres to Appendix C (see below) into a valid HTML
4.01 document. To make this translation
requires the following steps:

 The language for an element should be specified with a lang

attribute rather than the XHTML xml:lang attribute. XHTML uses
XML's built in language-defining functionality attribute.

 Remove the XML namespace (xmlns=URI). HTML has no

facilities for namespaces.

53
 Change the document type declaration from XHTML 1.0 to HTML
4.01. (see DTD section for further explanation).

 If present, remove the XML declaration. (Typically this is: <?xml

version="1.0" encoding="utf-8"?>).

 Ensure that the document's MIME type is set to text/html. For both
HTML and XHTML, this comes from the HTTP Content-Type
header sent by the server.

 Change the XML empty-element syntax to an HTML style empty

element (<br /> to <br>).

 Those are the main changes necessary to translate a document from

XHTML 1.0 to HTML 4.01. To translate from HTML to XHTML
would also require the addition of any omitted opening or closing
tags.

 Whether coding in HTML or XHTML it may just be best to always

include the optional tags within an HTML document rather than
remembering which tags can be omitted.A well-formed XHTML
document adheres to all the syntax requirements of XML.

 A valid document adheres to the content specification for XHTML,

which describes the document structure.

54
  The W3C recommends several conventions to ensure an easy
migration between HTML and XHTML (see HTML Compatibility
Guidelines).

 Include both xml:lang and lang attributes on any elements

assigning language.

Use the empty-element syntax only for elements specified as empty in

HTML.
 An extra space in empty-element tags: for example <br /> instead
of <br>.
 Include explicit close tags for elements that permit content but are
left empty (for example, <div></div>, not <div />).

By carefully following the W3C's compatibility guidelines, a user

agent should be able to interpret the document equally as HTML or
XHTML. For documents that are XHTML 1.0 and have been made
compatible in this way, the W3C permits them to be served either as
HTML (with a text/html MIME type), or as XHTML (with an
application/xhtml+xml or application/xml MIME type). When delivered
as XHTML, browsers should use an XML parser, which adheres strictly
to the XML specifications for parsing the document's contents.

looser content model

Inline elements and plain text are allowed directly in: body,
blockquote, form, noscript and noframes Presentation related elements
 underline (u)(Deprecated. can confuse a visitor with a hyperlink.)
 strike-through (s)
55
  center (Deprecated. use CSS instead.)
 font (Deprecated. use CSS instead.)
 basefont (Deprecated. use CSS instead.)

Frame related entities

 iframe
 noframes
 target (Deprecated in the map, link and form elements.) attribute on
a, client-side image-map (map), link, form and base elements

Cascading Style Sheets

CSS was first proposed by Håkon Wium Lie on October 10, 1994.
At the time, Lie was working with Tim Berners-Lee at CERN. Several
other style sheet languages for the web were proposed around the same
time, and discussions on public mailing lists and inside World Wide Web
Consortium resulted in the first W3C CSS Recommendation (CSS1)
being released in 1996. In particular, a proposal by Bert Bos was
influential; he became co-author of CSS1, and is regarded as co-creator of
CSS.

Style sheets have existed in one form or another since the

beginnings of Standard Generalized Markup Language (SGML) in the
1980s, and CSS was developed to provide style sheets for the web. One
requirement for a web style sheet language was for style sheets to come
from different sources on the web. Therefore, existing style sheet
languages like DSSSL and FOSI were not suitable. CSS, on the other
hand, let a document's style be influenced by multiple style sheets by way
of "cascading" styles.
56
 As HTML grew, it came to encompass a wider variety of stylistic
capabilities to meet the demands of web developers. This evolution gave
the designer more control over site appearance, at the cost of more
complex HTML. Variations in web browser implementations, such as
ViolaWWW and WorldWideWeb, made consistent site appearance
difficult, and users had less control over how web content was displayed.
The browser/editor developed by Tim Berners-Lee had style sheets that
were hard-coded into the program. The style sheets could therefore not be
linked to documents on the web. Robert Cailliau, also of CERN, wanted
to separate the structure from the presentation so that different style
sheets could describe different presentation for printing, screen-based
presentations, and editors.

Improving web presentation capabilities was a topic of interest to

many in the web community and nine different style sheet languages
were proposed on the www-style mailing list. Of these nine proposals,
two were especially influential on what became CSS: Cascading HTML
Style Sheets and Stream-based Style Sheet Proposal (SSP).2428 Two
browsers served as testbeds for the initial proposals; Lie worked with
Yves Lafon to implement CSS in Dave Raggett's Arena browser.293031
Bert Bos implemented his own SSP proposal in the Argo browser.
Thereafter, Lie and Bos worked together to develop the CSS standard (the
'H' was removed from the name because these style sheets could also be
applied to other markup languages besides HTML).

Lie's proposal was presented at the "Mosaic and the Web"

conference (later called WWW2) in Chicago, Illinois in 1994, and again
57
with Bert Bos in 1995.22 Around this time the W3C was already being
established, and took an interest in the development of CSS. It organized
a workshop toward that end chaired by Steven Pemberton. This resulted
in W3C adding work on CSS to the deliverables of the HTML editorial
review board (ERB). Lie and Bos were the primary technical staff on this
aspect of the project, with additional members, including Thomas
Reardon of Microsoft, participating as well. In August 1996, Netscape
Communication Corporation presented an alternative style sheet language
called JavaScript Style Sheets (JSSS). The spec was never finished, and is
deprecated. By the end of 1996, CSS was ready to become official, and
the CSS level 1 Recommendation was published in December.

Development of HTML, CSS, and the DOM had all been taking
place in one group, the HTML Editorial Review Board (ERB). Early in
1997, the ERB was split into three working groups: HTML Working
group, chaired by Dan Connolly of W3C; DOM Working group, chaired
by Lauren Wood of SoftQuad; and CSS Working group, chaired by Chris
Lilley of W3C.

The CSS Working Group began tackling issues that had not been
addressed with CSS level 1, resulting in the creation of CSS level 2 on
November 4, 1997. It was published as a W3C Recommendation on May
12, 1998. CSS level 3, which was started in 1998, is still under
development as of 2014.

In 2005, the CSS Working Groups decided to enforce the

requirements for standards more strictly. This meant that already

58
published standards like CSS 2.1, CSS 3 Selectors, and CSS 3 Text were
pulled back from Candidate Recommendation to Working Draft level.

The CSS 1 specification was completed in 1996. Microsoft's

Internet Explorer was released in that year, featuring some limited
support for CSS. IE 4 and Netscape 4.x added more support, but it was
typically incomplete and had many bugs that prevented CSS from being
usefully adopted. It was more than three years before any web browser
achieved near-full implementation of the specification. Internet Explorer
5.0 for the Macintosh, shipped in March 2000, was the first browser to
have full (better than 99 percent) CSS 1 support, surpassing Opera,
which had been the leader since its introduction of CSS support fifteen
months earlier. Other browsers followed soon afterwards, and many of
them additionally implemented parts of CSS 2.citation needed

However, even when later 'version 5' web browsers began to offer a
fairly full implementation of CSS, they were still incorrect in certain
areas and were fraught with inconsistencies, bugs and other quirks.
Microsoft Internet Explorer 5.x for Windows, as opposed to the very
different IE for Macintosh, had a flawed implementation of the 'CSS box
model', as compared with the CSS standards. Such inconsistencies and
variation in feature support made it difficult for designers to achieve a
consistent appearance across browsers and platforms without the use of
workarounds termed CSS hacks and filters. The IE/Windows box model
bugs were so serious that, when Internet Explorer 6 was released,
Microsoft introduced a backwards-compatible mode of CSS
interpretation ('quirks mode') alongside an alternative, corrected
'standards mode'. Other non-Microsoft browsers also provided such
59
'mode'-switch behaviour capability. It therefore became necessary for
authors of HTML files to ensure they contained special distinctive
'standards-compliant CSS intended' marker to show that the authors
intended CSS to be interpreted correctly, in compliance with standards, as
opposed to being intended for the now long-obsolete IE5/Windows
browser. Without this marker, web browsers that have the 'quirks mode'-
switching capability will size objects in web pages as IE5/Windows
would rather than following CSS standards. citation needed

Problems with patchy adoption of CSS, along with errata in the

original specification, led the W3C to revise the CSS 2 standard into CSS
2.1, which moved nearer to a working snapshot of current CSS support in
HTML browsers. Some CSS 2 properties that no browser successfully
implemented were dropped, and in a few cases, defined behaviors were
changed to bring the standard into line with the predominant existing
implementations. CSS 2.1 became a Candidate Recommendation on
February 25, 2004, but CSS 2.1 was pulled back to Working Draft status
on June 13, 2005, and only returned to Candidate Recommendation
status on July 19, 2007.

In addition to these problems, the .css extension was used by a

software product used to convert PowerPoint files into Compact Slide
Show files, so some web servers served all css as MIME type
application/x-pointplus3rather than text/css.

Variations
CSS has various levels and profiles. Each level of CSS builds upon
the last, typically adding new features and typically denoted as CSS 1,
60
CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more
levels of CSS built for a particular device or user interface. Currently
there are profiles for mobile devices, printers, and television sets. Profiles
should not be confused with media types, which were added in CSS 2.

CSS 1
The first CSS specification to become an official W3C
Recommendation is CSS level 1, published on December 17, 1996.
Håkon Wium Lie and Bert Bos are credited as the original
developers.3940 Among its capabilities are support for
 Font properties such as typeface and emphasis
 Color of text, backgrounds, and other elements
 Text attributes such as spacing between words, letters, and lines of
text
 Alignment of text, images, tables and other elements
 Margin, border, padding, and positioning for most elements
 Unique identification and generic classification of groups of
attributes
The W3C no longer maintains the CSS 1 Recommendation.

CSS 2
CSS level 2 specification was developed by the W3C and
published as a recommendation in May 1998. A superset of CSS 1, CSS 2
includes a number of new capabilities like absolute, relative, and fixed
positioning of elements and z-index, the concept of media types, support
for aural style sheets (which were later replaced by the CSS 3 speech
modules)42 and bidirectional text, and new font properties such as
shadows. The W3C no longer maintains the CSS 2 recommendation
61
CSS 2.1
CSS level 2 revision 1, often referred to as "CSS 2.1", fixes errors
in CSS 2, removes poorly supported or not fully interoperable features
and adds already implemented browser extensions to the specification. To
comply with the W3C Process for standardizing technical specifications,
CSS 2.1 went back and forth between Working Draft status and
Candidate Recommendation status for many years. CSS 2.1 first became
a Candidate Recommendation on February 25, 2004, but it was reverted
to a Working Draft on June 13, 2005 for further review. It returned to
Candidate Recommendation on 19 July 2007 and then updated twice in
2009. However, because changes and clarifications were made, it again
went back to Last Call Working Draft on 7 December 2010.

CSS 2.1 went to Proposed Recommendation on 12 April 2011.44

After being reviewed by the W3C Advisory Committee, it was finally
published as a W3C Recommendation on 7 June 2011.CSS 2.1 was
planned as the first and final revision of level 2—but low priority work
on CSS 2.2 began in 2015.

CSS 3
"CSS3" redirects here. For other uses, see CSS3
(disambiguation).Unlike CSS 2, which is a large single specification
defining various features, CSS 3 is divided into several separate
documents called "modules". Each module adds new capabilities or
extends features defined in CSS 2, preserving backward compatibility.
Work on CSS level 3 started around the time of publication of the original
CSS 2 recommendation. The earliest CSS 3 drafts were published in June
62
1999Due to the modularization, different modules have different stability
and statuses.Some modules have Candidate Recommendation (CR) status
and are considered moderately stable. At CR stage, implementations are
advised to drop vendor prefixes.

CSS 4
There is no single, integrated CSS4 specification,50 because it is
split into separate "level 4" modules.Because CSS3 split the CSS
language's definition into modules, the modules have been allowed to
level independently. Most modules are level 3 they build on things from
CSS 2.1. A few level-4 modules exist (such as Image Values,
Backgrounds & Borders, or Selectors) which build on the functionality of
a preceding level-3 module. Other modules defining entirely new
functionality, such as Flexbox, have been designated as "level 1".
The CSS Working Group sometimes publishes "Snapshots", a
collection of whole modules and parts of other drafts that are considered
stable, interoperable implemented and hence ready to use. So far, five
such "best current practices" documents have been published as Notes, in
2007, 2010,2015, 2017,and 2018.

Browser support
Each web browser uses a layout engine to render web pages, and
support for CSS functionality is not consistent between them. Because
browsers do not parse CSS perfectly, multiple coding techniques have
been developed to target specific browsers with workarounds (commonly
known as CSS hacks or CSS filters). Adoption of new functionality in
CSS can be hindered by lack of support in major browsers.

63
For example, Internet Explorer was slow to add support for many CSS 3
features, which slowed adoption of those features and damaged the
browser's reputation among developers. In order to ensure a consistent
experience for their users, web developers often test their sites across
multiple operating systems, browsers, and browser versions, increasing
development time and complexity. Tools such as Browser Stack have
been built to reduce the complexity of maintaining these environments.

In addition to these testing tools, many sites maintain lists of

browser support for specific CSS properties, including Can I Use and the
Mozilla Developer Network. Additionally, the CSS 3 defines feature
queries, which provide an supports directive that will allow developers to
target browsers with support for certain functionality directly within their
CSS. CSS that is not supported by older browsers can also sometimes be
patched in using JavaScript poly fills, which are pieces of JavaScript code
designed to make browsers behave consistently. These workaround sand
the need to support fallback functionality can add complexity to
development projects, and consequently, companies frequently define a
list of browser versions that they will and will not support.

As websites adopt newer code standards that are incompatible with

older browsers, these browsers can be cut off from accessing many of the
resources on the web (sometimes intentionally). Many of the most
popular sites on the internet are not just visually degraded on older
browsers due to poor CSS support, but do not work at all, in large part
due to the evolution of JavaScript and other web technologies.

64
Limitations
Some noted limitations of the current capabilities of CSS include:

Selectors are unable to ascend

CSS currently offers no way to select a parent or ancestor of an
element that satisfies certain criteria.65 CSS Selectors Level 4, which is
still in Working Draft status, proposes such a selector,66 but only as part
of the "complete" selector profile, not the "fast" profile used in dynamic
CSS styling.67 A more advanced selector scheme (such as XPath) would
enable more sophisticated style sheets. The major reasons for the CSS
Working Group previously rejecting proposals for parent selectors are
related to browser performance and incremental rendering issues.

Cannot explicitly declare new scope independently of position

Scoping rules for properties such as z-index look for the closest
parent element with a position: absolute or position: relative attribute.
This odd coupling has undesired effects. For example, it is impossible to
avoid declaring a new scope when one is forced to adjust an element's
position, preventing one from using the desired scope of a parent element.

Pseudo-class dynamic behavior not controllable

CSS implements pseudo-classes that allow a degree of user
feedback by conditional application of alternate styles. One CSS pseudo-
class, ":hover", is dynamic (equivalent of JavaScript "onmouseover") and
has potential for abuse (e.g., implementing cursor-proximity popups),69
but CSS has no ability for a client to disable it (no "disable"-like
65
property) or limit its effects (no "nochange"-like values for each
property).

Cannot name rules

There is no way to name a CSS rule, which would allow (for
example) client-side scripts to refer to the rule even if its selector
changes.
Cannot include styles from a rule into another rule
CSS styles often must be duplicated in several rules to achieve a
desired effect, causing additional maintenance and requiring more
thorough testing. Some new CSS features were proposed to solve this, but
(as of February, 2016) are not yet implemented anywhere.

Cannot target specific text without altering markup

Besides the :first-letter pseudo-element, one cannot target specific
ranges of text without needing to utilize place-holder elements.

Former issues
Additionally, several more issues were present in prior versions of
the CSS standard, but have been alleviated:

Vertical control limitations

Though horizontal placement of elements was always generally
easy to control, vertical placement was frequently unintuitive,
convoluted, or outright impossible. Simple tasks, such as centering an
element vertically or placing a footer no higher than bottom of the
viewport required either complicated and unintuitive style rules, or simple
but widely unsupported rules. The Flexible Box Module improved the
66
situation considerably and vertical control is much more straightforward
and supported in all of the modern browsers. Older browsers still have
those issues, but most of those (mainly Internet Explorer 9 and below) are
no longer supported by their vendors.

Absence of expressions
There was no standard ability to specify property values as simple
expressions (such as margin-left: 10% – 3em + 4px;). This would be
useful in a variety of cases, such as calculating the size of columns
subject to a constraint on the sum of all columns. Internet Explorer
versions 5 to 7 support a proprietary expression() statement, with similar
functionality. This proprietary expression() statement is no longer
supported from Internet Explorer 8 onwards, except in compatibility
modes. This decision was taken for "standards compliance, browser
performance, and security reasons". However, a candidate
recommendation with a calc() value to address this limitation has been
published by the CSS WG74 and has since been supported in all of the
modern browsers.

Lack of column declaration

Although possible in current CSS 3 (using the column-count
module),76 layouts with multiple columns can be complex to implement
in CSS 2.1. With CSS 2.1, the process is often done using floating
elements, which are often rendered differently by different browsers,
different computer screen shapes, and different screen ratios set on
standard monitors. All of the modern browsers support this CSS 3 feature
in one form or another.

67
What is Css
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup language
like HTML.CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and
content, including layout, colors, and fonts.3 This separation can improve
content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple web pages to
share formatting by specifying the relevant CSS in a separate .css file,
and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to

present the same markup page in different styles for different rendering
methods, such as on-screen, in print, by voice (via speech-based browser
or screen reader), and on Braille-based tactile devices. CSS also has rules
for alternate formatting if the content is accessed on a mobile device.4

The name cascading comes from the specified priority scheme to

determine which style rule applies if more than one rule matches a
particular element. This cascading priority scheme is predictable.

The CSS specifications are maintained by the World Wide Web

Consortium (W3C). Internet media type (MIME type) text/css is
registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents.In addition to

68
HTML, other markup languages support the use of CSS including
XHTML, plain XML, SVG, and XUL.

Syntax
 CSS has a simple syntax and uses a number of English keywords to
specify the names of various style properties.
 A style sheet consists of a list of rules. Each rule or rule-set
consists of one or more selectors, and a declaration block.

Selector
In CSS, selectors declare which part of the markup a style applies
to by matching tags and attributes in the markup itself.
Selectors may apply to the following:
 all elements of a specific type, e.g. the second-level headers h2
elements specified by attribute, in particular:
 id: an identifier unique within the document
 class: an identifier that can annotate multiple elements in a
document
 elements depending on how they are placed relative to others in the
document tree.

Classes and IDs are case-sensitive, start with letters, and can include
alphanumeric characters, hyphens and underscores. A class may apply to
any number of instances of any elements. An ID may only be applied to a
single element.

Pseudo-classes are used in CSS selectors to permit formatting based

on information that is not contained in the document tree. One example of
69
a widely used pseudo-class is :hover, which identifies content only when
the user "points to" the visible element, usually by holding the mouse
cursor over it. It is appended to a selector as in a:hover or
#elementid:hover. A pseudo-class classifies document elements, such as
:link or :visited, whereas a pseudo-element makes a selection that may
consist of partial elements, such as ::first-line or ::first-letter.6
Selectors may be combined in many ways to achieve great specificity and
flexibility.7 Multiple selectors may be joined in a spaced list to specify
elements by location, element type, id, class, or any combination thereof.
The order of the selectors is important. For example, div .myClass {color:
red;} applies to all elements of class myClass that are inside div elements,
whereas .myClass div {color: red;} applies to all div elements that are in
elements of class myClass.

The following table provides a summary of selector syntax

indicating usage and the version of CSS that introduced it.
Declaration block
A declaration block consists of a list of declarations in braces. Each
declaration itself consists of a property, a colon (:), and a value. If there
are multiple declarations in a block, a semi-colon (;) must be inserted to
separate each declaration.

Properties are specified in the CSS standard. Each property has a

set of possible values. Some properties can affect any type of element,
and others apply only to particular groups of elements.

Values may be keywords, such as "center" or "inherit", or

numerical values, such as 200px (200 pixels), 50vw (50 percent of the
70
viewport width) or 80% (80 percent of the parent element's width). Color
values can be specified with keywords (e.g. "red"), hexadecimal values
(e.g. #FF0000, also abbreviated as #F00), RGB values on a 0 to 255 scale
(e.g. rgb(255, 0, 0)), RGBA values that specify both color and alpha
transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values (e.g.
hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

Length units
Non-zero numeric values representing linear measures must
include a length unit, which is either an alphabetic code or abbreviation,
as in 200px or 50vw; or a percentage sign, as in 80%. Some units – cm
(centimetre); in (inch); mm (millimetre); pc (pica); and pt (point) – are
absolute, which means that the rendered dimension does not depend upon
the structure of the page; others – em (em); ex (ex) and px (pixel) – are
relative, which means that factors such as the font size of a parent
element can affect the rendered measurement. These eight units were a
feature of CSS 112 and retained in all subsequent revisions. The proposed
CSS Values and Units Module Level 3 will, if adopted as a W3C
Recommendation, provide seven further length units: ch; Q; rem; vh;
vmax; vmin; and vw.

Use
Before CSS, nearly all presentational attributes of HTML
documents were contained within the HTML markup. All font colors,
background styles, element alignments, borders and sizes had to be
explicitly described, often repeatedly, within the HTML. CSS lets authors
move much of that information to another file, the style sheet, resulting in
considerably simpler HTML.
71
For example, headings (h1 elements), sub-headings (h2), sub-sub-
headings (h3), etc., are defined structurally using HTML. In print and on
the screen, choice of font, size, color and emphasis for these elements is
presentational.

Before CSS, document authors who wanted to assign such

typographic characteristics to, say, all h2 headings had to repeat HTML
presentational markup for each occurrence of that heading type. This
made documents more complex, larger, and more error-prone and
difficult to maintain. CSS allows the separation of presentation from
structure. CSS can define color, font, text alignment, size, borders,
spacing, layout and many other typographic characteristics, and can do so
independently for on-screen and printed views. CSS also defines non-
visual styles, such as reading speed and emphasis for aural text readers.
The W3C has now deprecated the use of all presentational HTML
markup.
For example, under pre-CSS HTML, a heading element defined with red
text would be written as:
<h1><font color="red"> Chapter 1. </font></h1>

Using CSS, the same element can be coded using style properties
instead of HTML presentational attributes:

<h1 style="color: red;"> Chapter 1. </h1>

The advantages of this may not be immediately clear (since the

second form is actually more verbose), but the power of CSS becomes
72
more apparent when the style properties are placed in an internal style
element or, even better, an external CSS file.
For example, suppose the document contains the style element:

All h1 elements in the document will then automatically become red

without requiring any explicit code. If the author later wanted to make h1
elements blue instead, this could be done by changing the style element
to:

<style>
h1 {
color: blue;
}
</style>

rather than by laboriously going through the document and changing the
color for each individual h1 element.
The styles can also be placed in an external CSS file, as described below,
and loaded using syntax similar to:
<link href="path/to/file.css" rel="stylesheet" type="text/css">

Sources
CSS information can be provided from various sources. These
sources can be the web browser, the user and the author. The information
from the author can be further classified into inline, media type,
importance, selector specificity, rule order, inheritance and property
definition. CSS style information can be in a separate document or it can
be embedded into an HTML document. Multiple style sheets can be
73
imported. Different styles can be applied depending on the output device
being used; for example, the screen version can be quite different from
the printed version, so that authors can tailor the presentation
appropriately for each medium.
The style sheet with the highest priority controls the content
display. Declarations not set in the highest priority source are passed on
to a source of lower priority, such as the user agent style. The process is
called cascading.

One of the goals of CSS is to allow users greater control over

presentation. Someone who finds red italic headings difficult to read may
apply a different style sheet. Depending on the browser and the web site,
a user may choose from various style sheets provided by the designers, or
may remove all added styles and view the site using the browser's default
styling, or may override just the red italic heading style without altering
other attributes.

Specificity
Specificity refers to the relative weights of various rules.15 It
determines which styles apply to an element when more than one rule
could apply. Based on specification, a simple selector (e.g. H1) has a
specificity of 1, class selectors have a specificity of 1,0, and ID selectors
a specificity of 1,0,0. Because the specificity values do not carry over as
in the decimal system, commas are used to separate the "digits"16 (a CSS
rule having 11 elements and 11 classes would have a specificity of 11,11,
not 121).

74
Consider this HTML fragment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#xyz { color: blue; }
</style>
</head>
<body>
<p id="xyz" style="color: green;"> To demonstrate specificity </p>
</body>
</html>

In the above example, the declaration in the style attribute

overrides the one in the <style> element because it has a higher
specificity, and thus, the paragraph appears green.

Inheritance
Inheritance is a key feature in CSS; it relies on the ancestor-
descendant relationship to operate. Inheritance is the mechanism by
which properties are applied not only to a specified element, but also to
its descendants. Inheritance relies on the document tree, which is the
hierarchy of XHTML elements in a page based on nesting. Descendant
elements may inherit CSS property values from any ancestor element

75
enclosing them. In general, descendant elements inherit text-related
properties, but their box-related properties are not inherited.

Properties that can be inherited are color, font, letter-spacing, line-

height, list-style, text-align, text-indent, text-transform, visibility, white-
space and word-spacing. Properties that cannot be inherited are
background, border, display, float and clear, height, and width, margin,
min- and max-height and -width, outline, overflow, padding, position,
text-decoration, vertical-align and z-index.

Inheritance can be used to avoid declaring certain properties over

and over again in a style sheet, allowing for shorter CSS. Inheritance in
CSS is not the same as inheritance in class-based programming
languages, where it is possible to define class B as "like class A, but with
modifications". With CSS, it is possible to style an element with "class
A, but with modifications". However, it is not possible to define a CSS
class B like that, which could then be used to style multiple elements
without having to repeat the modifications.

Whitespace
Whitespace between properties and selectors is ignored. This code
snippet

body{overflow:hidden;background:#000000;background-
image:url(images/bg.gif);background-repeat:no-repeat;background-
position:left top;}

76
 Normal flow Inline items are laid out in the same way as the letters
in words in text, one after the other across the available space until there
is no more room, then starting a new line below. Block items stack
vertically, like paragraphs and like the items in a bulleted list. Normal
flow also includes relative positioning of block or inline items, and run-in
boxes.

Floats
A floated item is taken out of the normal flow and shifted to the left
or right as far as possible in the space available. Other content then flows
alongside the floated item.

Absolute positioning
An absolutely positioned item has no place in, and no effect on, the
normal flow of other items. It occupies its assigned position in its
container independently of other items.

Position property
There are four possible values of the position property. If an item is
positioned in any way other than static, then the further properties top,
bottom, left, and right are used to specify offsets and positions.

Static
The default value places the item in the normal flow

Relative

77
 The item is placed in the normal flow, and then shifted or offset
from that position. Subsequent flow items are laid out as if the item had
not been moved.

Absolute
Specifies absolute positioning. The element is positioned in relation
to its nearest non-static ancestor.

Fixed
The item is absolutely positioned in a fixed position on the screen
even as the rest of the document is scrolled

Float and clear

The float property may have one of three values. Absolutely
positioned or fixed items cannot be floated. Other elements normally flow
around floated items, unless they are prevented from doing so by their
clear property.

left
The item floats to the left of the line that it would have appeared in;
other items may flow around its right side.

right
The item floats to the right of the line that it would have appeared
in; other items may flow around its left side.

clear
78
 Forces the element to appear underneath ('clear') floated elements
to the left (clear:left), right (clear:right) or both sides (clear:both).

CHAPTER 5

SYSTEM DESIGN

5. SYSTEM DESIGN

System design is process of software development life cycle where

the project is defined in diagrammatic way or picture representation so
that the process and the ideology of the project can be properly
understood by the developer visually.

5.1 ARCHITECTURE DESIGN

The overall system architecture diagram explains the structure of

our complete project in a graphical model in very simple and effective
manner. It almost holds every component or modules of our developing
projects and the workflow of the components and the relative data
resources

79
 Fig:5.1 System Architecture

5.2 USE CASE DIAGRAM

A use case is a set of scenarios that describing an interaction
between a user and a system. A use case diagram displays the relationship
among actors and use cases. The two main components of a use case
80
diagram are use cases and actors. An actor is represents a user or another
system that will interact with the system modeled. A use case is an
external view of the system that represents some action the user might
perform in order to complete a task

Fig:5.2 System Usecase

USECASE COMPONENTS
Actor and usecase are the main components of the usecase diagram
which are used to explain the access of function for a particular
participant in an application

81
 Fig:5.2.1 Actor Component

The symbol mentioned in the fig 5.2.1 is used to represent the user
of the functionalities or usecase of the project. It contains a label below
which helps us to identifier the user category.

Fig:5.2.2 Usecase Component

The functionalities of the project are represented using an ellipse

with a label inside them which mentions the name of the functionality.
The figure 5.2.2 is a how the usecase will look like.

82
 Fig:5.2.3 Relationship Component

The arrow show in the diagram are used to represent the

relationship between the usecase and the actor. The arrow point toward
the usecase from the actor which means the user have the access to the
particular functionalities in the project. The usecase diagram can contain
multiple actor and can have multiple access to the usecases. Similarly
same usecase can be accessed by the multiple actor/users in the project.

5.3 SEQUENTIAL DIAGRAM

A sequence diagram shows, as parallel vertical lines (“lifelines”),
different processes or objects that live simultaneously, and as the
horizontal arrows, the messages exchanged between them, in the order in
which they occur. This allows the specification of simple runtime
scenarios in a graphical manner

Fig:5.3 Sequence Diagram

83
SEQUENCE DIAGRAM COMPONENTS

The sequence diagram uses arrows to represent the message flow

between the object inside the project. The sequence of the arrow from top
down method represent the sequence of the message flow

Fig:5.3.1 Object Component

The rectangular box is used to represent the objects used in the

project and a label given inside the rectangle to identify the object. The
messages flow between the objects for which a straight line is drawn
below the rectangle.

Fig:5.3.2 Message Flow Component

An arrow as shown in the figure 5.3.2 will be used to mention the

message flow between the objects the label below the arrow represent the
message. The point of the arrow represent the direction of the message
flow and the sequence of the arrows used in the diagram represent the
sequence of the message flow.

84
5.4 ACTIVITY DIAGRAM
Activity diagram is another important diagram in UML to describe
dynamic aspects of the system. Activity diagram is basically a flow chart
to represent the flow from one activity to another activity. The activity
can be described as an operation of the system.

Fig:5.4 Activity Diagram

85
ACTIVITY DIAGRAM COMPONENTS
The components of the activity diagram contain rounded corner rectangle,
downward arrows, diamond and circle symbols to represent the activity
flow in the project.

Fig:5.4.1 Start and final(end) Symbol

The initial node is the starting point of an activity represented by an

empty circle or a filled circle as in figure 5.4.1. An activity can have more
than one initial node; in this case several flows start at the beginning of an
activity. It is also possible that an activity has no initial node, but is
initiated by an event (action: accepting an event).The activity final node a
circle with a dot are show in figure 5.4.1 indicates that an activity is
completed. An activity diagram can have more than one exit in the form
of activity final nodes: If several parallel flows are present within an
activity, all flows are stopped at the time the activity final node is
reached.

Fig:5.4.2 Activity Symbol

86
 The symbol represent in the figure 5.4.2 is used to represent the
activity in the project. The flow of the activities is represent by an arrow
the travel in the downward direction connecting to the next activities used
in the project

Fig:5.4.3 Decision Symbol

The figure 5.4.3 represents a conditional branch point or decision

node. A decision node has one input and two or more outputs. Each
output has a condition attached to it. If a condition is met, the flow
proceeds along the appropriate output. An ‘else’ output can be defined
along which the flow can proceed if no other condition is met.

5.5 DATA FLOW DIAGRAM

Activity diagram is another important diagram in UML to describe
dynamic aspects of the system. Activity diagram is basically a flow chart
to represent the flow from one activity to another activity. The activity
can be described as an operation of the system.

87
 Fig:5.5 Dataflow Diagram

DATAFLOW COMPONENTS

The dataflow diagram contains rectangle, arrows and circles to

represent the process, data flow and the database object used in the
project the dataflow diagram is similar to the sequence diagram but it
represent the flow between the process rather than the object

88
 Fig:5.5.1 Entity Symbol

The rectangular symbol is used to mention the entities or objects

used in the project work.. The name of the entity is labeled inside the
rectangle to identify them.

Fig:5.5.2 Process Symbol

The process involved in the project are represented using a circle

with the name of the process labeled in between the circle as shown in the
figure 5.5.2. The data flow between the process and the object is
represented using an arrow. The direction of dataflow is identified by the
arrows pointing direction.

Fig:5.5.3 Database Symbol

The data flow between the process and the database can also be
shown in the dataflow diagram to represent a database we use a partial
rectangle as shown in the figure 5.5.3. similar to the entity and process
dataflow. The direction of data flow is represent by the arrow.
89
 CHAPTER 6

IMPLEMENTATION

6. SYSTEM IMPLEMENTATION
In this chapter the main implementation of the projects is explained
in detail part by part in the form of modules. The implementation is based
on the project design as already mentioned in the system design chapter.
The developer always need to compare and verify the system design
information for developing the correct and proper implementation of the
project.

6.1 LIST OF MODULES

Login module
Customer module
Dashboard module
Category module
Location module
Products module
Billing Report

90
6.2 DESCRIPTION OF MODULES
This section elaborate the list of modules mentioned in the previous
section of this chapter. This will help the reader of the project document
to better understand the development / implementation process of our
project.

Login module:
In this module, the customer, seller, worker and the admin can login to
the system by entering login id and password. The system opens main
account page after the login.
Customer module:
The customer can register to the website by entering profile details. The
customer can purchase products which are uploaded by administrator.
They can also send purchase request for purchasing farm produce which
is uploaded by farmers. After quality test and price quotation, the
customer can approve or reject the purchase request.
Dashboard module:
Dashboard module is for administrator and employees. In the dashboard
module, admin has complete settings of the website. Employees can
manage all kinds of records.
Article module: In the article module, employees or admin can post news
and blogs. This article module is helpful for farmers. The farmers can
view the article by browsing article menu.

Category module:
91
In this module, the administrator can create different types of categories.
The system has three types of categories: i.e. Farm Produce, Agricultural
Machinery & Tools, and Article types.
Location module:
This is the master page where admin can add country, state, city.
Products module:
This website sells two kinds of products. Admin or employees can sell
products directly and it has another option where farmers can sell their
productions online.
Billing Report:
The system generates billing after purchasing the product. The system
calculates total cost automatically. In the billing report, it displays
customer contact details, billing details, and purchased product
information.

CHAPTER 7
92
 TESTING

7.1 TESTING OBJECTIVE

Software will undergo many changes after it is delivered to the user

Because of many errors, performance enhancements and change to new
environments. System testing is the stage of implementations, which is
aimed at ensuring that the system works accurately and efficiently before
live operations commences. Testing is vital to the success of the system.
The candidate system is subject to a variety of tests. Data prepared for the
purpose of testing is called test data. Testing is the process by which the
programmers generate a set of test data, which gives the maximum
probability of finding all types of errors that can occur in the software and
the following steps has been performed.

7.2 TESTING TECHNIQUES

1. Unit Testing
2. System Testing
3. Black-Box Testing
4. White Box Testing
5. Integration Testing
6. Requirement Testing
7. Acceptance Testing

7.2.1 UNIT TESTING

93
 Unit testing is a testing technique using which individual modules are
tested to determine if there are any issues by the developer himself. It is
concerned with functional correctness of the standalone modules. The
main aim is to isolate or separate each unit or module of the system to
identify, analyze and fix the defects. The following are the advantages of
the testing.

 Reduces Defects in the newly developed features or reduces bugs

when changing the existing functionality.
 It reduces Cost of Testing as defects are captured in very early
phase.
 Improves design and allows better refactoring of code.
 Unit Tests, when integrated with build gives the quality of the build
as well.

94
7.2.2 SYSTEM TESTING
System Testing (ST) is a black box testing technique performed to
evaluate the complete system the system's compliance against specified
requirements. In System testing, the functionalities of the system are
tested from an end-to-end perspective.
System Testing is usually carried out by a team that is independent
of the development team in order to measure the quality of the system
unbiased. It includes both functional and Non-Functional testing.

The above diagram explains the different types of testing process

carried out during the system testing process. For a project to success the
system testing it has to pass all the above testing process

95
7.2.3 BLACK BOX TESTING
Black-box testing is a method of software testing that examines the
functionality of an application based on the specifications. It is also
known as Specifications based testing. Independent Testing Team usually
performs this type of testing during the software testing life cycle.
This method of test can be applied to each and every level of software
testing such as unit, integration, system and acceptance testing.
There are different techniques involved in Black Box testing process

 Equivalence Class
 Boundary Value Analysis
 Domain Tests
 Orthogonal Arrays
 Decision Tables
 State Models
 Exploratory Testing
 All-pairs testing

7.2.4 WHITE BOX TESTING

White box testing is a testing technique that examines the program
structure and derives test data from the program logic/code. The other
names of glass box testing are clear box testing, open box testing, logic
driven testing or path driven testing or structural testing. White Box
Testing Techniques includes

 Statement Coverage-This technique is aimed at exercising all

programming statements with minimal tests.
 Branch Coverage-This technique is running a series of tests to
ensure that all branches are tested at least once.

96
  Path Coverage-This technique corresponds to testing all possible
paths which means that each statement and branch is covered.

7.2.5 INTEGRATION TESTING

Upon completion of unit testing, the units or modules are to be
integrated which gives raise to integration testing. The purpose of
integration testing is to verify the functional, performance, and reliability
between the modules that are integrated. Integration strategies include

1. Big-Bang Integration
2. Top Down Integration
3. Bottom Up Integration
4. Hybrid Integration

7.2.6 REQUIREMENT TESTING

Requirements-based testing is a testing approach in which test cases,
conditions and data are derived from requirements. It includes functional
tests and also non-functional attributes such as performance, reliability or
usability. Stages in Requirements based Testing:

 Defining Test Completion Criteria-Testing is completed only

when all the functional and non-functional testing is complete.
 Design Test Cases-A Test case has five parameters namely the
initial state or precondition, data setup, the inputs, expected
outcomes and actual outcomes.
 Execute Tests-Execute the test cases against the system under test
and document the results.
 Verify Test Results-Verify if the expected and actual results match
each other.

97
  Verify Test Coverage-Verify if the tests cover both functional and
non-functional aspects of the requirement.
 Track and Manage Defects-Any defects detected during the
testing process goes through the defect life cycle and are tracked to
resolution. Defect Statistics are maintained which will give us the
overall status of the project.

7.2.7 ACCEPTANCE TESTING

User acceptance testing is a testing methodology where the
clients/end users involved in testing the product to validate the product
against their requirements. It is performed at client location at developer's
site.For industry such as medicine or aviation industry, contract and
regulatory compliance testing and operational acceptance testing is also
carried out as part of user acceptance testing. UAT is context dependent
and the UAT plans are prepared based on the requirements and NOT
mandatory to execute all kinds of user acceptance tests and even
coordinated and contributed by testing team.
The following diagram explains the fitment of user acceptance
testing in the software development life cycle:

98
 The acceptance test cases are executed against the test data or using an
acceptance test script and then the results are compared with the expected
ones. Acceptance criteria are defined on the basis of the following
attributes

 Functional Correctness and Completeness

 Data Integrity
 Data Conversion
 Usability
 Performance
 Timeliness
 Confidentiality and Availability
 Install ability and Upgradability
 Scalability
 Documentation

99
7.3 Test Cases
A test case, in software engineering, is a set of conditions under
which a tester will determine whether an application, software system or
one of its features is working as it was originally established for it to do.

Login Form: Test Case

Expected
Controls Cases Value Outcome
Result
Non
Login
EmailId Registered test@gmail.com Yes
Restricted
Textbox Email
Registered gokul@gmail.co Access
Yes
Email m Granted
Wrong Login
000000 Yes
Password Restricted
Password Login
Null Value Null Yes
Textbox Restricted
Correct Access
12345 Yes
Password Granted

CHAPTER 8

APPENDICE
100
8.1 SCREENSHOT

101
102
Home Page

103
 Property Listing

8.2 SOURCE CODING

<?php

/**

* Template Name: Sidebar Right

104
*

* @package electro

*/

global $post;

$page_meta_values = get_post_meta( $post->ID, '_electro_page_metabox', true );

$header_style = '';

if ( isset( $page_meta_values['site_header_style'] ) && !

empty( $page_meta_values['site_header_style'] ) ) {

$header_style = $page_meta_values['site_header_style'];

electro_get_header( $header_style ); ?>

<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php

while ( have_posts() ) : the_post();

do_action( 'electro_page_before' );

get_template_part( 'templates/contents/content', 'page' );

105
 /**

* @hooked electro_display_comments - 10

*/

do_action( 'electro_page_after' );

endwhile; // end of the loop.

?>

</main><!-- #main -->

</div><!-- #primary -->

<?php

do_action( 'electro_sidebar', 'home' );

get_footer();

INDEX.PHP

<?php

/**

* The main template file.

* This is the most generic template file in a WordPress theme

* and one of the two required files for a theme (the other being style.css).

106
* It is used to display a page when nothing more specific matches a query.

* E.g., it puts together the home page when no home.php file exists.

* Learn more: http://codex.wordpress.org/Template_Hierarchy

* @package electro

*/

electro_get_header();

do_action( 'electro_before_main_content' );

if ( ! function_exists( 'elementor_theme_do_location' ) || !
elementor_theme_do_location( 'archive' ) ) :

if( have_posts() ) {

get_template_part( 'loop' );

} else {

get_template_part( 'templates/contents/content', 'none' );

endif;

do_action( 'electro_after_main_content' );
107
get_footer();

Page.php

<?php

/**

* The template for displaying all pages.

* This is the template that displays all pages by default.

* Please note that this is the WordPress construct of pages

* and that other 'pages' on your WordPress site will use a

* different template.

* @package electro

*/

global $post;

$page_meta_values = get_post_meta( $post->ID, '_electro_page_metabox',

true );

$header_style = '';

if ( isset( $page_meta_values['site_header_style'] ) && !

empty( $page_meta_values['site_header_style'] ) ) {

$header_style = $page_meta_values['site_header_style'];

electro_get_header( $header_style ); ?>

108
<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php

while ( have_posts() ) : the_post();

do_action( 'electro_page_before' );

get_template_part( 'templates/contents/content', 'page' );

/**

* @hooked electro_display_comments - 10

*/

do_action( 'electro_page_after' );

endwhile; // end of the loop.

?>

</main><!-- #main -->

</div><!-- #primary -->

<?php get_footer();

109
Header1.php

<?php

/**

* The header v1 for Electro.

* Displays all of the <head> section and everything up till <div id="content">

* @package electro

*/

?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

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

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

wp_body_open();

110
 ?>

<div class="off-canvas-wrapper">

<div id="page" class="hfeed site">

<?php

/**

* @hooked electro_skip_links - 0

* @hooked electro_top_bar - 10

*/

do_action( 'electro_before_header' ); ?>

<?php if ( ! function_exists( 'elementor_theme_do_location' ) || !

elementor_theme_do_location( 'header' ) ) : ?>

<header id="masthead" class="site-header header-v1 stick-this">

<div class="container <?php echo

esc_attr( electro_desktop_header_responsive_class() ); ?>">

<?php

/**

* @hooked electro_masthead - 10

* @hooked electro_navigation - 20

*/

do_action( 'electro_header_v1' ); ?>

</div>

<?php
111
 /**

* @hooked electro_handheld_header - 10

*/

do_action( 'electro_after_header' ); ?>

</header><!-- #masthead -->

<?php endif; ?>

<?php do_action( 'electro_before_content' ); ?>

<div id="content" class="site-content" tabindex="-1">

<div class="container">

<?php

/**

* @hooked woocommerce_breadcrumb - 10

*/

do_action( 'electro_content_top' ); ?>

Header2.php

<?php

/**

* The header for our theme.

* Displays all of the <head> section and everything up till <div id="content">

112
* @package electro

*/

?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

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

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

wp_body_open();

?>

<div class="off-canvas-wrapper">

<div id="page" class="hfeed site">

<?php

/**

* @hooked electro_skip_links - 0

* @hooked electro_top_bar - 10

*/

do_action( 'electro_before_header' ); ?>

113
 <?php if ( ! function_exists( 'elementor_theme_do_location' ) || !
elementor_theme_do_location( 'header' ) ) : ?>

<header id="masthead" class="header-v2 stick-this site-header<?php if ( !

apply_filters( 'electro_show_header_support_info', true ) ) { echo esc_attr( ' no-
header-support-info' ); } ?>">

<div class="container <?php echo esc_attr( has_electro_mobile_header() ?

electro_desktop_header_responsive_class() : '' ); ?>">

<?php

/**

* @hooked electro_masthead_v2 - 10

* @hooked electro_navbar_v2 - 20

*/

do_action( 'electro_header_v2' ); ?>

</div>

<?php

/**

* @hooked electro_handheld_header - 10

*/

do_action( 'electro_after_header' ); ?>

</header><!-- #masthead -->

114
 <?php endif; ?>

<?php

/**

* @hooked electro_navbar - 10

*/

do_action( 'electro_before_content' ); ?>

<div id="content" class="site-content" tabindex="-1">

<div class="container">

<?php

/**

* @hooked woocommerce_breadcrumb - 10

*/

do_action( 'electro_content_top' ); ?>

Header3.php

<?php

/**

* The header for our theme.

* Displays all of the <head> section and everything up till <div id="content">

* @package electro

115
*/

?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

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

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

wp_body_open();

?>

<div class="off-canvas-wrapper">

<div id="page" class="hfeed site">

<?php

/**

* @hooked electro_skip_links - 0

* @hooked electro_top_bar - 10

*/

do_action( 'electro_before_header' ); ?>

116
 <?php if ( ! function_exists( 'elementor_theme_do_location' ) || !
elementor_theme_do_location( 'header' ) ) : ?>

<header id="masthead" class="site-header header-v3 stick-this">

<div class="container <?php echo

esc_attr( has_electro_mobile_header() ? electro_desktop_header_responsive_class() :
'' ); ?>">

<?php

/**

* @hooked electro_row_wrap_start - 0

* @hooked electro_header_logo - 10

* @hooked electro_primary_menu - 20

* @hooked electro_header_support_info - 30

* @hooked electro_row_wrap_end - 40

*/

do_action( 'electro_header_v3' ); ?>

</div>

<?php

/**

* @hooked electro_handheld_header - 10

*/

do_action( 'electro_after_header' ); ?>

</header><!-- #masthead -->

117
 <?php endif; ?>

<?php

/**

* @hooked electro_navbar - 10

*/

do_action( 'electro_before_content' ); ?>

<div id="content" class="site-content" tabindex="-1">

<div class="container">

<?php

/**

* @hooked woocommerce_breadcrumb - 10

*/

do_action( 'electro_content_top' ); ?>

<?php

/**

* The header for our theme.

* Displays all of the <head> section and everything up till <div id="content">

* @package electro

*/

118
?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

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

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

wp_body_open();

?>

<div class="off-canvas-wrapper">

<div id="page" class="hfeed site">

<div class="full-color-background">

<?php

/**

* @hooked electro_skip_links - 0

* @hooked electro_top_bar - 10

*/

do_action( 'electro_before_header' ); ?>

119
 <?php if ( ! function_exists( 'elementor_theme_do_location' ) || !
elementor_theme_do_location( 'header' ) ) : ?>

<header id="masthead" class="site-header stick-this header-v4">

<div class="container <?php echo

esc_attr( has_electro_mobile_header() ? electro_desktop_header_responsive_class() :
'' ); ?>">

<?php

/**

* @hooked electro_row_wrap_start - 0

* @hooked electro_header_logo - 10

* @hooked electro_primary_menu - 20

* @hooked electro_header_support_info - 30

* @hooked electro_row_wrap_end - 40

*/

do_action( 'electro_header_v4' ); ?>

</div>

<?php

/**

* @hooked electro_handheld_header - 10

*/

do_action( 'electro_after_header' ); ?>

</header><!-- #masthead -->

120
 <?php endif; ?>

</div>

<?php

/**

* @hooked electro_navbar - 10

*/

do_action( 'electro_before_content' ); ?>

<div id="content" class="site-content" tabindex="-1">

<div class="container">

<?php

/**

* @hooked woocommerce_breadcrumb - 10

*/

do_action( 'electro_content_top' ); ?>

<?php

/**

* The template for displaying the homepage.

* This page template will display any functions hooked into the `homepage` action.

* By default this includes a variety of product displays and the page content itself. To
change the order or toggle these components

* use the Homepage Control plugin.

121
* https://wordpress.org/plugins/homepage-control/

* Template name: Homepage v1

* @package electro

*/

remove_action( 'electro_content_top', 'electro_breadcrumb', 10 );

do_action( 'electro_before_homepage_v1' );

$home_v1 = electro_get_home_v1_meta();

$header_style = isset( $home_v1['hpc']['header_style'] ) ? $home_v1['hpc']

['header_style'] : 'v1';

electro_get_header( $header_style ); ?>

<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php

/**

* @hooked electro_page_template_content - 5

* @hooked electro_home_v1_slider - 10

* @hooked electro_home_v1_ads_block - 20

* @hooked electro_home_v1_deal_and_tabs_block - 30

* @hooked electro_home_v1_2_1_2_block - 40
122
 * @hooked electro_home_v1_product_cards_carousel - 50

* @hooked electro_home_v1_ad_banner - 60

* @hooked electro_home_v1_products_carousel - 70

*/

do_action( 'homepage_v1' ); ?>

</main><!-- #main -->

</div><!-- #primary -->

<?php

get_footer();

<?php

/**

* electro engine room

* @package electro

*/

/**

* Initialize all the things.

*/

require get_template_directory() . '/inc/init.php';

/**

123
 * Note: Do not add any custom code here. Please use a child theme so that your
customizations aren't lost during updates.

* http://codex.wordpress.org/Child_Themes

*/

<?php

/**

* The Template for displaying product archives, including the main shop page which
is a post type archive

* This template can be overridden by copying it to

yourtheme/woocommerce/archive-product.php.

* HOWEVER, on occasion WooCommerce will need to update template files and

you

* (the theme developer) will need to copy the new files to your theme to

* maintain compatibility. We try to do this as little as possible, but it does

* happen. When this occurs the version of the template file will be bumped and

* the readme will list any important changes.

* @see https://docs.woocommerce.com/document/template-structure/

* @package WooCommerce/Templates

* @version 3.4.0

*/

defined( 'ABSPATH' ) || exit;

124
electro_get_header(); ?>

<?php

/**

* woocommerce_before_main_content hook.

* @hooked electro_before_wc_content - 10 (outputs opening divs for the

content)

* @hooked electro_before_product_archive_content - 20

*/

do_action( 'woocommerce_before_main_content' );

?>

<?php

/**

* woocommerce_archive_description hook.

* @hooked woocommerce_taxonomy_archive_description - 10

* @hooked woocommerce_product_archive_description - 10

*/

do_action( 'woocommerce_archive_description' );

?>

<?php if ( ( function_exists( 'woocommerce_product_loop' ) &&

woocommerce_product_loop() ) || have_posts() ) : ?>

125
<?php

/**

* woocommerce_before_shop_loop hook.

* @hooked electro_product_subcategories - 0

* @hooked electro_wc_loop_title - 10

* @hooked electro_shop_control_bar - 10

* @hooked electro_reset_woocommerce_loop - 90

*/

do_action( 'woocommerce_before_shop_loop' );

?>

<?php

/**

* woocommerce_shop_loop hook

* @hooked electro_shop_loop

*/

do_action( 'woocommerce_shop_loop' );

?>

<?php

/**

* woocommerce_after_shop_loop hook.

126
 * @hooked woocommerce_pagination - 10

*/

do_action( 'woocommerce_after_shop_loop' );

?>

<?php else : ?>

<?php

/**

* Hook: woocommerce_no_products_found.

* @hooked wc_no_products_found - 10

*/

do_action( 'woocommerce_no_products_found' );

?>

<?php endif; ?>

<?php

/**

* woocommerce_after_main_content hook.

* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing

divs for the content)

*/

do_action( 'woocommerce_after_main_content' );
127
 ?>

<?php

/**

* woocommerce_sidebar hook.

* @hooked woocommerce_get_sidebar - 10

*/

do_action( 'woocommerce_sidebar' );

?>

<?php get_footer(); ?>

<?php

/**

* Product quantity inputs

* This template can be overridden by copying it to

yourtheme/woocommerce/global/quantity-input.php.

* HOWEVER, on occasion WooCommerce will need to update template files and

you

* (the theme developer) will need to copy the new files to your theme to

* maintain compatibility. We try to do this as little as possible, but it does

* happen. When this occurs the version of the template file will be bumped and

* the readme will list any important changes.

*
128
* @see https://docs.woocommerce.com/document/template-structure/

* @package WooCommerce/Templates

* @version 4.0.0

*/

defined( 'ABSPATH' ) || exit;

if ( empty( $classes ) ) {

$classes = array( 'input-text', 'qty', 'text' );

if ( $max_value && $min_value === $max_value ) {

?>

<div class="quantity hidden hidden-xs-up">

<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>"

class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo
esc_attr( $min_value ); ?>" />

</div>

<?php

} else {

/* translators: %s: Quantity. */

$labelledby = ! empty( $args['product_name'] ) ? sprintf( __( '%s quantity',

'electro' ), wp_strip_all_tags( $args['product_name'] ) ) : '';

?>

<div class="quantity">

<?php do_action( 'woocommerce_before_quantity_input_field' ); ?>

129
 <label for="<?php echo esc_attr( $input_id ); ?>"><?php
esc_html_e( 'Quantity', 'electro' ); ?></label>

<input

type="number"

id="<?php echo esc_attr( $input_id ); ?>"

class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"

step="<?php echo esc_attr( $step ); ?>"

min="<?php echo esc_attr( $min_value ); ?>"

max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' );

?>"

name="<?php echo esc_attr( $input_name ); ?>"

value="<?php echo esc_attr( $input_value ); ?>"

title="<?php echo esc_attr_x( 'Qty', 'Product quantity input

tooltip', 'electro' ); ?>"

size="4"

inputmode="<?php echo esc_attr( $inputmode ); ?>"

<?php if ( ! empty( $labelledby ) ) { ?>

aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />

<?php } ?>

<?php do_action( 'woocommerce_after_quantity_input_field' ); ?>

</div>

<?php

<?php

/**

* The Template for displaying vendor biography.

130
*

* @package dokan

*/

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

$is_electro_style = electro_is_dokan_electro_store_style();

$store_version = electro_get_dokan_store_version();

$store_user = dokan()->vendor->get( get_query_var( 'author' ) );

$store_info = $store_user->get_shop_info();

?>

<?php get_header( 'shop' ); ?>

<?php do_action( 'electro_dokan_store_before_header' ); ?>

<?php if ( $is_electro_style && in_array( $store_version, array( 'store-v1', 'store-v2',

'store-v5' ) ) ) { ?>

<div class="electro-dokan-single-store-header-wraper">

<div class="dokan-single-store-header">

<?php dokan_get_template_part( 'store-header' ); ?>

</div>

</div>

131
<?php } ?>

<?php do_action( 'woocommerce_before_main_content' ); ?>

<div id="dokan-primary" class="dokan-single-store">

<div id="dokan-content" class="vendor-biography-wrap woocommerce"

role="main">

<?php if ( ! $is_electro_style || ( $is_electro_style && $store_version === 'store-

v3' ) ) {

dokan_get_template_part( 'store-header' );

} ?>

<div id="vendor-biography">

<div id="comments">

<?php do_action( 'dokan_vendor_biography_tab_before', $store_user,

$store_info ); ?>

<div class="page-header">

<h3 class="page-title headline"><?php echo

apply_filters( 'dokan_vendor_biography_title', __( 'Vendor Biography', 'electro' ) ); ?
></h3>

</div>

<?php

if ( ! empty( $store_info['vendor_biography'] ) ) {

printf( '%s', apply_filters( 'the_content', $store_info['vendor_biography'] )

);
132
 }

?>

<?php do_action( 'dokan_vendor_biography_tab_after', $store_user,

$store_info ); ?>

</div>

</div>

</div>

</div><!-- .dokan-single-store -->

<?php do_action( 'woocommerce_after_main_content' ); ?>

<?php get_footer( 'shop' ); ?>

<?php

/**

* The Template for displaying all reviews.

* @package dokan

* @package dokan - 2014 1.0

*/

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

$is_electro_style = electro_is_dokan_electro_store_style();

133
$store_version = electro_get_dokan_store_version();

$store_user = dokan()->vendor->get( get_query_var( 'author' ) );

$store_info = $store_user->get_shop_info();

?>

<?php get_header( 'shop' ); ?>

<?php do_action( 'electro_dokan_store_before_header' ); ?>

<?php if ( $is_electro_style && in_array( $store_version, array( 'store-

v1', 'store-v2', 'store-v5' ) ) ) { ?>

<div class="electro-dokan-single-store-header-wraper">

<div class="dokan-single-store-header">

<?php dokan_get_template_part( 'store-header' ); ?>

</div>

</div>

<?php } ?>

134
<?php do_action( 'woocommerce_before_main_content' ); ?>

<div id="dokan-primary" class="dokan-single-store">

<div id="dokan-content" class="store-toc-wrap woocommerce"

role="main">

<?php if ( ! $is_electro_style || ( $is_electro_style &&

$store_version === 'store-v3' ) ) {

dokan_get_template_part( 'store-header' );

} ?>

<div id="store-toc-wrapper">

<div id="store-toc">

<?php

if( isset( $store_info['store_tnc'] ) ):

?>

<div class="page-header">

<h3 class="page-title headline"><?php _e( 'Terms And

Conditions', 'electro' ); ?></h3>

</div>

<div>

<?php

echo nl2br($store_info['store_tnc']);

135
 ?>

</div>

<?php

endif;

?>

</div><!-- #store-toc -->

</div><!-- #store-toc-wrap -->

</div>

</div><!-- .dokan-single-store -->

<?php do_action( 'woocommerce_after_main_content' ); ?>

<?php get_footer( 'shop' ); ?>

<?php

/**

* The Template for displaying all reviews.

* @package dokan

* @package dokan - 2014 1.0

*/

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

136
$is_electro_style = electro_is_dokan_electro_store_style();

$store_version = electro_get_dokan_store_version();

$store_user = get_userdata( get_query_var( 'author' ) );

$store_info = dokan_get_store_info( $store_user->ID );

$map_location = isset( $store_info['location'] ) ?

esc_attr( $store_info['location'] ) : '';

?>

<?php get_header( 'shop' ); ?>

<?php do_action( 'electro_dokan_store_before_header' ); ?>

<?php if ( $is_electro_style && in_array( $store_version, array( 'store-

v1', 'store-v2', 'store-v5' ) ) ) { ?>

<div class="electro-dokan-single-store-header-wraper">

<div class="dokan-single-store-header">

<?php dokan_get_template_part( 'store-header' ); ?>

</div>

</div>

<?php } ?>

<?php do_action( 'woocommerce_before_main_content' ); ?>

137
<div id="dokan-primary" class="dokan-single-store">

<div id="dokan-content" class="store-review-wrap woocommerce"

role="main">

<?php if ( ! $is_electro_style || ( $is_electro_style &&

$store_version === 'store-v3' ) ) {

dokan_get_template_part( 'store-header' );

} ?>

<?php

$dokan_template_reviews = version_compare( dokan_pro()-

>version, '3.0.0' , '<' ) ? Dokan_Pro_Reviews::init() : dokan_pro()-
>review;

$id = $store_user->ID;

$post_type = 'product';

$limit = 20;

$status = '1';

$comments = $dokan_template_reviews-
>comment_query( $id, $post_type, $limit, $status );

?>

<div id="reviews">

138
 <div id="comments">

<?php do_action( 'dokan_review_tab_before_comments' ); ?>

<h2 class="headline"><?php _e( 'Vendor Review', 'electro' ); ?

></h2>

<ol class="commentlist">

<?php echo $dokan_template_reviews-

>render_store_tab_comment_list( $comments , $store_user->ID); ?>

</ol>

</div>

</div>

<?php echo $dokan_template_reviews->review_pagination( $id,

$post_type, $limit, $status ); ?>

</div><!-- #content .site-content -->

</div><!-- #primary .content-area -->

<?php do_action( 'woocommerce_after_main_content' ); ?>

139
<?php get_footer(); ?>

<?php $store_list_style =
electro_is_dokan_electro_store_list_version(); ?>

<div id="dokan-seller-listing-wrap">

<div class="seller-listing-content">

<?php if ( $sellers['users'] ) : ?>

<ul class="dokan-seller-wrap">

<?php

foreach ( $sellers['users'] as $seller ) {

$vendor = dokan()->vendor->get( $seller->ID );

$store_banner_id = $vendor->get_banner_id();

$store_name = $vendor->get_shop_name();

$store_url = $vendor->get_shop_url();

$store_rating = $vendor->get_rating();

$is_store_featured = $vendor->is_featured();

$store_phone = $vendor->get_phone();

$store_info = dokan_get_store_info( $seller->ID );

$store_address = dokan_get_seller_short_address( $seller-

>ID );

$store_banner_url = $store_banner_id ?
wp_get_attachment_image_src( $store_banner_id, $image_size ) :
DOKAN_PLUGIN_ASSEST . '/images/default-store-banner.png';

?>

140
 <li class="dokan-single-seller woocommerce coloum-<?php
echo esc_attr( $per_row ); ?>">

<?php if( ! empty( $store_list_style ) ) : ?>

<?php if( $store_list_style === 'style-v1' ) : ?>

<?php

$products = dokan()->product->latest( array(

'author' => $seller->ID,

'posts_per_page' => 2,

) );

?>

<div class="dokan-single-seller__inner">

<div class="dokan-single-seller__logo">

<?php echo get_avatar( $seller->ID, 150 ); ?>

</div>

<?php if( $products->have_posts() ) : ?>

<div class="dokan-single-seller__inner--
products">

<?php while ( $products->have_posts() ) :

$products->the_post(); global $product; ?>

<div class="dokan-seller-product">

<?php
woocommerce_template_loop_product_thumbnail(); ?>

141
 </div>

<?php endwhile; wp_reset_postdata(); ?>

</div>

<?php endif; ?>

</div>

<div class="dokan-single-seller__inner--bottom">

<h2><a href="<?php echo esc_attr( $store_url ); ?

>">

<?php echo !empty( $store_name ) ?

esc_html( $store_name ) : esc_html__( 'Visit Store', 'electro' ); ?>

</a></h2>

</div>

<div style="display: none !important;">

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>

<?php elseif( $store_list_style === 'style-v2' ) : ?>

<?php

$products = dokan()->product->latest( array(

'author' => $seller->ID,

'posts_per_page' => 3,

) );

?>

142
 <div class="dokan-single-seller__inner">

<?php if( $products->have_posts() ) : ?>

<div class="dokan-single-seller__inner--
products products-<?php echo esc_attr( $products->post_count ); ?>">

<?php while ( $products->have_posts() ) :

$products->the_post(); global $product; ?>

<div class="dokan-seller-product">

<?php
woocommerce_template_loop_product_thumbnail(); ?>

</div>

<?php endwhile; wp_reset_postdata(); ?>

</div>

<?php endif; ?>

<div class="dokan-single-seller__inner--bottom">

<div class="dokan-single-seller__logo">

<?php echo get_avatar( $seller->ID, 150 ); ?>

</div>

<div class="store-data">

<?php if ( !empty( $store_rating['count'] ) ): ?

>

<div class="store-ratings">

<div class="star-rating dokan-seller-

rating" title="<?php echo sprintf( esc_attr__( 'Rated %s out of 5',
'electro' ), esc_attr( $store_rating['rating'] ) ) ?>">
143
 <span style="width: <?php echo
( esc_attr( ( $store_rating['rating'] / 5 ) ) * 100 - 1 ); ?>%">

<strong class="rating"><?php echo

esc_html( $store_rating['rating'] ); ?></strong> <?php _e( 'out of 5',
'electro' ); ?>

</span>

</div>

<span class="rating-count">( <?php echo

esc_html( $store_rating['count'] ); ?> )</span>

</div>

<?php endif ?>

<h2><a href="<?php echo esc_attr( $store_url

); ?>">

<?php echo !empty( $store_name ) ?

esc_html( $store_name ) : esc_html__( 'Visit Store', 'electro' ); ?>

</a></h2>

<?php if ( $store_address ): ?>

<?php

$allowed_tags = array(

'span' => array(

'class' => array(),

),
144
 );

?>

<p class="store-address"><i class="ec ec-

map-pointer"></i><?php echo wp_kses( $store_address, $allowed_tags );
?></p>

<?php endif; ?>

</div>

</div>

</div>

<div style="display: none !important;">

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>

<?php elseif( $store_list_style === 'style-v3' ) : ?>

<?php

$products = dokan()->product->latest( array(

'author' => $seller->ID,

'posts_per_page' => 4,

) );

?>

<div class="dokan-single-seller__inner">

<?php if( $products->have_posts() ) : ?>

145
 <div class="dokan-single-seller__inner--
products products-<?php echo esc_attr( $products->post_count ); ?>">

<?php while ( $products->have_posts() ) :

$products->the_post(); global $product; ?>

<div class="dokan-seller-product">

<?php
woocommerce_template_loop_product_thumbnail(); ?>

</div>

<?php endwhile; wp_reset_postdata(); ?>

</div>

<?php endif; ?>

</div>

<div class="dokan-single-seller__inner--bottom">

<div class="dokan-single-seller__logo">

<?php echo get_avatar( $seller->ID, 150 ); ?>

</div>

<div class="store-data">

<h2><a href="<?php echo esc_attr( $store_url );

?>">

<?php echo !empty( $store_name ) ?

esc_html( $store_name ) : esc_html__( 'Visit Store', 'electro' ); ?>

</a></h2>

146
 <?php if ( $store_address ): ?>

<?php

$allowed_tags = array(

'span' => array(

'class' => array(),

),

);

?>

<p class="store-address"><i class="ec ec-

map-pointer"></i><?php echo wp_kses( $store_address, $allowed_tags );
?></p>

<?php endif; ?>

</div>

</div>

<div style="display: none !important;">

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>

<?php elseif( $store_list_style === 'style-v4' ) : ?>

<?php

$products = dokan()->product->latest( array(

'author' => $seller->ID,

'posts_per_page' => 4,

147
 ) );

?>

<div class="dokan-single-seller__outter">

<div class="dokan-single-seller__inner">

<div class="dokan-single-seller__info">

<div class="dokan-single-seller__logo">

<?php echo get_avatar( $seller->ID,

100 ); ?>

</div>

<div class="dokan-store-name-address">

<h2 class="store-name"><a href="<?php

echo esc_attr( $store_url ); ?>">

<?php echo !empty( $store_name ) ?

esc_html( $store_name ) : esc_html__( 'Visit Store', 'electro' ); ?>

</a></h2>

<?php if ( $store_address ): ?>

<?php

$allowed_tags = array(

'span' => array(

'class' => array(),

),

);

?>

148
 <p class="store-address"><i class="ec
ec-map-pointer"></i><?php echo wp_kses( $store_address,
$allowed_tags ); ?></p>

<?php endif; ?>

</div>

</div>

<div class="store-data">

<?php if( electro_dokan_store_follow_exists()

) : ?>

<?php

$follow_button = new
Dokan_Follow_Store_Follow_Button();

electro_remove_class_action( 'dokan_after_
store_tabs', 'Dokan_Follow_Store_Follow_Button',
'add_follow_button_after_store_tabs', 99 );

?>

<div class="dokan-store-follow-store-
button-container dokan-store-follow-store-btn-wrap">

<?php $follow_button-
>add_follow_button( $vendor->data, array( 'dokan-btn-sm' ) ); ?>

</div>

<?php endif ?>

<span class="sold-products-count">

149
 <?php $sold_prod_coutnt =
dokan_count_orders($seller->ID);

echo sprintf( $sold_prod_coutnt->{'wc-

completed'} . ' %s', esc_html__( 'products sold', 'electro' ) ); ?>

</span>

<?php if ( !empty( $store_rating['count'] ) ): ?

>

<div class="store-ratings">

<div class="star-rating dokan-seller-

rating" title="<?php echo sprintf( esc_attr__( 'Rated %s out of 5',
'electro' ), esc_attr( $store_rating['rating'] ) ) ?>">

<span style="width: <?php echo

( esc_attr( ( $store_rating['rating'] / 5 ) ) * 100 - 1 ); ?>%">

<strong class="rating"><?php echo

esc_html( $store_rating['rating'] ); ?></strong> <?php _e( 'out of 5',
'electro' ); ?>

</span>

</div>

<span class="rating-count">( <?php echo

esc_html( $store_rating['count'] ); ?> )</span>

</div>

<?php endif ?>

</div>

<?php if( $products->have_posts() ) : ?>

150
 <div class="dokan-single-seller__products">

<?php while ( $products->have_posts() ) :

$products->the_post(); global $product; ?>

<div class="dokan-seller-product">

<?php
woocommerce_template_loop_product_thumbnail(); ?>

</div>

<?php endwhile; ?>

<?php if( $products->found_posts > 4 ) : ?>

<div class="dokan-seller-remaining-
product">

<div class="dokan-seller-remaining-
product__inner">

<span class="remaining-products-
count">

<?php echo
esc_html( ( $products->found_posts - 4 ) . '+' ); ?>

</span>

</div>

</div>

<?php endif; wp_reset_postdata(); ?>

</div>

<?php endif; ?>

</div>
151
 </div>

<div style="display: none !important;">

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>

<?php elseif( $store_list_style === 'style-v5' ) : ?>

<div class="dokan-single-seller__outter">

<div class="dokan-single-seller__inner">

<div class="dokan-single-seller__info">

<div class="dokan-single-seller__logo">

<?php echo get_avatar( $seller->ID,

100 ); ?>

</div>

<div class="dokan-store-name-info">

<h2 class="store-name"><a href="<?php

echo esc_attr( $store_url ); ?>">

<?php echo !empty( $store_name ) ?

esc_html( $store_name ) : esc_html__( 'Visit Store', 'electro' ); ?>

</a></h2>

<div class="dokan-store-address-sold-
products">

<?php if ( $store_address ): ?>

<?php

152
 $allowed_tags = array(

'span' => array(

'class' => array(),

),

);

?>

<p class="store-address"><i class="ec

ec-map-pointer"></i><?php echo wp_kses( $store_address,
$allowed_tags ); ?></p>

<?php endif; ?>

<span class="sold-products-count">

<?php $sold_prod_coutnt =
dokan_count_orders($seller->ID);

echo sprintf( $sold_prod_coutnt-

>{'wc-completed'} . ' %s', esc_html__( 'products sold', 'electro' ) ); ?>

</span>

</div>

</div>

</div>

<?php
if( electro_dokan_store_follow_exists() ) : ?>

<?php

$follow_button = new
Dokan_Follow_Store_Follow_Button();
153
 electro_remove_class_action( 'dokan_after_st
ore_tabs', 'Dokan_Follow_Store_Follow_Button',
'add_follow_button_after_store_tabs', 99 );

?>

<div class="dokan-store-follow-store-button-
container dokan-store-follow-store-btn-wrap">

<?php $follow_button-
>add_follow_button( $vendor->data, array( 'dokan-btn-sm' ) ); ?>

</div>

<?php endif ?>

</div>

</div>

<div style="display: none !important;">

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>

<?php endif; ?>

<?php else : ?>

<div class="store-wrapper">

<div class="store-content">

<div class="store-info" style="background-image:

url( '<?php echo is_array( $store_banner_url ) ?
esc_attr( $store_banner_url[0] ) : esc_attr( $store_banner_url ); ?>');">
154
 <div class="store-data-container">

<div class="featured-favourite">

<?php if ( $is_store_featured ) : ?>

<div class="featured-label"><?php
esc_html_e( 'Featured', 'electro' ); ?></div>

<?php endif ?>

<?php
do_action( 'dokan_seller_listing_after_featured', $seller, $store_info ); ?>

</div>

<div class="store-data">

<h2><a href="<?php echo

esc_attr( $store_url ); ?>"><?php echo esc_html( $store_name ); ?
></a></h2>

<?php if ( !empty( $store_rating['count'] ) ):

?>

<div class="star-rating dokan-seller-

rating" title="<?php echo sprintf( esc_attr__( 'Rated %s out of 5',
'electro' ), esc_attr( $store_rating['rating'] ) ) ?>">

<span style="width: <?php echo

( esc_attr( ( $store_rating['rating'] / 5 ) ) * 100 - 1 ); ?>%">

155
 <strong class="rating"><?php echo
esc_html( $store_rating['rating'] ); ?></strong> <?php _e( 'out of 5',
'electro' ); ?>

</span>

</div>

<?php endif ?>

<?php if ( $store_address ): ?>

<?php

$allowed_tags = array(

'span' => array(

'class' => array(),

),

'br' => array()

);

?>

<p class="store-address"><?php echo

wp_kses( $store_address, $allowed_tags ); ?></p>

<?php endif ?>

<?php if ( $store_phone ) { ?>

<p class="store-phone">

156
 <i class="fa fa-phone" aria-
hidden="true"></i> <?php echo esc_html( $store_phone ); ?>

</p>

<?php } ?>

<?php
do_action( 'dokan_seller_listing_after_store_data', $seller,
$store_info ); ?>

</div>

</div>

</div>

</div>

<div class="store-footer">

<div class="seller-avatar">

<?php echo get_avatar( $seller->ID, 150 ); ?>

</div>

<a href="<?php echo esc_url( $store_url ); ?>"

class="dokan-btn dokan-btn-theme"><?php esc_html_e( 'Visit Store',
'electro' ); ?></a>

<?php
do_action( 'dokan_seller_listing_footer_content', $seller, $store_info ); ?>

</div>
157
 </div>

<?php endif; ?>

</li>

<?php } ?>

<div class="dokan-clearfix"></div>

</ul> <!-- .dokan-seller-wrap -->

<?php

$user_count = $sellers['count'];

$num_of_pages = ceil( $user_count / $limit );

if ( $num_of_pages > 1 ) {

echo '<div class="pagination-container clearfix">';

$pagination_args = array(

'current' => $paged,

'total' => $num_of_pages,

'base' => $pagination_base,

'type' => 'array',

'prev_text' => __( '&larr; Previous', 'electro' ),

'next_text' => __( 'Next &rarr;', 'electro' ),

158
 );

if ( ! empty( $search_query ) ) {

$pagination_args['add_args'] = array(

'dokan_seller_search' => $search_query,

);

$page_links = paginate_links( $pagination_args );

if ( $page_links ) {

$pagination_links = '<div class="pagination-wrap">';

$pagination_links .= '<ul class="pagination"><li>';

$pagination_links .= join( "</li>\n\t<li>", $page_links );

$pagination_links .= "</li>\n</ul>\n";

$pagination_links .= '</div>';

echo $pagination_links; // phpcs:ignore

WordPress.XSS.EscapeOutput.OutputNotEscaped

echo '</div>';

}
159
 ?>

<?php else: ?>

<p class="dokan-error"><?php esc_html_e( 'No vendor found!',

'electro' ); ?></p>

<?php endif; ?>

</div>

<?php if( $store_list_style === 'style-v5' ) : ?>

<?php do_action( 'dokan_electro_store_list_after', $sellers ); ?>

<?php endif; ?>

</div>

<?php

$store_user = dokan()->vendor->get( get_query_var( 'author' ) );

$store_info = $store_user->get_shop_info();

$social_info = $store_user->get_social_profiles();

$store_tabs = dokan_get_store_tabs( $store_user->get_id() );

$social_fields = dokan_get_social_profile_fields();

$dokan_appearance = get_option( 'dokan_appearance' );

$profile_layout =
empty( $dokan_appearance['store_header_template'] ) ? 'default' :
$dokan_appearance['store_header_template'];

160
$store_address = dokan_get_seller_short_address( $store_user-
>get_id(), false );

$dokan_store_time_enabled =
isset( $store_info['dokan_store_time_enabled'] ) ?
$store_info['dokan_store_time_enabled'] : '';

$store_open_notice = isset( $store_info['dokan_store_open_notice'] )

&& ! empty( $store_info['dokan_store_open_notice'] ) ?
$store_info['dokan_store_open_notice'] : __( 'Store Open', 'electro' );

$store_closed_notice =
isset( $store_info['dokan_store_close_notice'] ) && !
empty( $store_info['dokan_store_close_notice'] ) ?
$store_info['dokan_store_close_notice'] : __( 'Store Closed', 'electro' );

$show_store_open_close = dokan_get_option( 'store_open_close',

'dokan_appearance', 'on' );

$general_settings = get_option( 'dokan_general', [] );

$banner_width = dokan_get_option( 'store_banner_width',

'dokan_appearance', 625 );

if ( ( 'default' === $profile_layout ) || ( 'layout2' === $profile_layout ) ) {

$profile_img_class = 'profile-img-circle';

} else {

$profile_img_class = 'profile-img-square';

161
}

if ( 'layout3' === $profile_layout ) {

unset( $store_info['banner'] );

$no_banner_class = ' profile-frame-no-banner';

$no_banner_class_tabs = ' dokan-store-tabs-no-banner';

} else {

$no_banner_class = '';

$no_banner_class_tabs = '';

$user_data = get_userdata($store_user->get_id());

$registered_date = $user_data->user_registered;

$registered_year = date( "Y", strtotime( $registered_date ) );

$store_id = $user_data->ID;

$is_electro_style = electro_is_dokan_electro_store_style();

$store_version = electro_get_dokan_store_version();

$show_support_btn = isset( $store_info['show_support_btn'] ) &&

( $store_info['show_support_btn'] === 'yes' ) ? true : false;
162
$support_text = isset( $store_info['support_btn_name'] ) && !
empty( $store_info['support_btn_name'] ) ?
$store_info['support_btn_name'] : __( 'Send Message', 'electro' );

if ( is_user_logged_in() ) {

$user_logged_in = 'user_logged';

} else {

$user_logged_in = 'user_logged_out';

?>

<div class="profile-frame <?php echo esc_attr( $no_banner_class ); ?>">

<div class="profile-info-box profile-layout-<?php echo

esc_attr( $is_electro_style ? 'electro' : $profile_layout ); ?>">

<?php if ( ! ( $is_electro_style && $store_version === 'store-v3' ) ) :

?>

<div class="bg-image-wrapper">

<?php if ( $store_user->get_banner() ) { ?>

<img src="<?php echo esc_url( $store_user-

>get_banner() ); ?>"

alt="<?php echo esc_attr( $store_user-

>get_shop_name() ); ?>"
163
 title="<?php echo esc_attr( $store_user-
>get_shop_name() ); ?>"

class="profile-info-img">

<?php } else { ?>

<div class="profile-info-img dummy-image">&nbsp;</div>

<?php } ?>

</div>

<?php endif; ?>

<div class="profile-info-summery-wrapper dokan-clearfix">

<div class="profile-info-summery">

<?php if ( $is_electro_style ) { ?>

<div class="profile-info-head">

<div class="profile-img profile-img-circle">

<img src="<?php echo esc_url( $store_user-

>get_avatar() ) ?>"

alt="<?php echo esc_attr( $store_user-

>get_shop_name() ) ?>"

size="160">

</div>

</div>

<?php if ( $store_version === 'store-v3' ) : ?>

<div class="profile-summery-info-buttons-wrapper">

<?php endif; ?>

164
 <div class="profile-summery-info-wrapper">

<?php if ( $store_version === 'store-v5' ) : ?>

<div class="store-title-buttons-wrapper">

<?php endif; ?>

<?php if ( $store_version !== 'store-v2' && $store_version

!== 'store-v3' ) : ?>

<div class="title-and-rating">

<?php if ( ! empty( $store_user->get_shop_name() )

&& ( 'default' === $profile_layout || $is_electro_style ) ) { ?>

<h1 class="store-name"><?php echo

esc_html( $store_user->get_shop_name() ); ?></h1>

<?php } ?>

<div class="dokan-store-rating">

<?php

$vendor = dokan()->vendor->get( $store_id );

$rating = dokan_get_seller_rating($store_id);

if ( ! $rating['count'] ) {

$html = __( 'No ratings found yet!', 'electro' );

} else {

$long_text = _n( '%d review', '%d reviews',

$rating['count'], 'electro' );

165
 $text = sprintf( __( 'Rated %s out of %d',
'electro' ), $rating['rating'], number_format( 5 ) );

$width = ( $rating['rating']/5 ) * 100;

$review_text = sprintf( $long_text,

$rating['count'] );

if ( function_exists( 'dokan_get_review_url' ) ) {

$review_text = sprintf( '<span>%s</span>',

$review_text );

$html = '<span class="seller-rating">

<span title=" '. esc_attr( $text ) . '"

class="star-rating" itemtype="http://schema.org/Rating" itemscope=""
itemprop="reviewRating">

<span class="width" style="width: ' .

$width . '%"></span>

<span style=""><strong
itemprop="ratingValue">' . $rating['rating'] . '</strong></span>

</span>

</span>

<span class="text">(' . $review_text .

')</span>';

166
 echo wp_kses_post( $html );

?>

</div>

</div> <!-- .title-and-rating -->

<?php endif; ?>

<?php if ( $store_version === 'store-v5' ) : ?>

<?php if ( is_dokan_pro_activated() &&

( ( electro_dokan_store_support_exists() && $show_support_btn ) ||
electro_dokan_store_follow_exists() ||
electro_dokan_store_share_exists() ) ) : ?>

<div class="dokan-store-support-and-follow-wrap">

<?php

$vendor = dokan()->vendor->get( $store_id );

$store_info = dokan_get_store_info( $store_id );

if( electro_dokan_store_support_exists() &&

$show_support_btn ) {

if( version_compare( dokan_pro()->version,

'3.0.0' , '<' ) ) {

electro_remove_class_action( 'dokan_after_
store_tabs', 'Dokan_Store_Support', 'generate_support_button' );

} else {
167
 electro_remove_class_action( 'dokan_after_
store_tabs', 'WeDevs\DokanPro\Modules\StoreSupport\Module',
'generate_support_button' );

?><div class="dokan-store-support-btn-
wrap">

<button data-store_id="<?php echo

$store_id; ?>" class="dokan-store-support-btn dokan-btn dokan-btn-
theme dokan-btn-sm <?php echo $user_logged_in ?>"><?php echo
esc_html( $support_text ); ?></button>

</div><?php

if( electro_dokan_store_follow_exists() ) {

$follow_button = new
Dokan_Follow_Store_Follow_Button();

electro_remove_class_action( 'dokan_after_st
ore_tabs', 'Dokan_Follow_Store_Follow_Button',
'add_follow_button_after_store_tabs', 99 );

?><div class="dokan-store-follow-store-
button-container dokan-store-follow-store-btn-wrap">

<?php $follow_button-
>add_follow_button( $vendor->data, array( 'dokan-btn-sm' ) ); ?>
168
 </div><?php

if( electro_dokan_store_share_exists() ) {

$dokan_social =
version_compare( dokan_pro()->version, '3.0.0' , '<' ) ?
Dokan_Pro_Store_Share::init() : dokan_pro()->store_share;

echo $dokan_social->render_html();

?>

</div>

<?php endif; ?>

</div>

<?php endif; ?>

<div class="profile-info">

<?php if ( ! empty( $store_user->get_shop_name() )

&& ( $store_version === 'store-v2' || $store_version === 'store-v3' ) ) { ?
>

<h1 class="store-name"><?php echo

esc_html( $store_user->get_shop_name() ); ?></h1>

<?php } ?>

169
 <ul class="dokan-store-info">

<?php if ( isset( $store_address ) && !

empty( $store_address ) ) { ?>

<li class="dokan-store-address"><i class="ec ec-

map-pointer"></i>

<?php echo $store_address; ?>

</li>

<?php } ?>

<?php if ( !empty( $store_user->get_phone() ) ) { ?>

<li class="dokan-store-phone">

<i class="fa fa-mobile"></i>

<a href="tel:<?php echo esc_html( $store_user-

>get_phone() ); ?>"><?php echo esc_html( $store_user->get_phone() ); ?
></a>

</li>

<?php } ?>

<?php if ( $store_user->show_email() == 'yes' ) { ?>

<li class="dokan-store-email">

<i class="fa fa-envelope-o"></i>

<a href="mailto:<?php echo

esc_attr( antispambot( $store_user->get_email() ) ); ?>"><?php echo
esc_attr( antispambot( $store_user->get_email() ) ); ?></a>
170
 </li>

<?php } ?>

<li class="dokan-sold-products">

<?php $sold_prod_coutnt =
dokan_count_orders($store_id); ?>

<span class="sold-products-count">

<?php echo '<i class="ec ec-add-to-cart"></i>' .

sprintf( $sold_prod_coutnt->{'wc-completed'} . ' %s',
esc_html__( 'products sold', 'electro' ) ); ?>

</span>

</li>

<li class="dokan-user-date">

<?php

echo '<i class="far fa-calendar-check"></i>' .

sprintf( '%1s ' . get_bloginfo() . ' %2s ' . $registered_year,
esc_html__( 'On', 'electro' ), esc_html__( 'from', 'electro' ) );

?>

</li>

<li class="dokan-owner-name">

<?php
171
 echo '<i class="ec ec-user"></i>' . sprintf( '%s:
' . $user_data->display_name, esc_html__( 'Owner', 'electro' ) );

?>

</li>

<?php if ( $show_store_open_close == 'on' &&

$dokan_store_time_enabled == 'yes') : ?>

<li class="dokan-store-open-close">

<i class="fas fa-store-alt"></i>

<?php if ( dokan_is_store_open( $store_user-

>get_id() ) ) {

echo esc_attr( $store_open_notice );

} else {

echo esc_attr( $store_closed_notice );

} ?>

</li>

<?php endif ?>

<?php do_action( 'dokan_store_header_info_fields',

$store_user->get_id() ); ?>

</ul>

172
 <?php if ( $social_fields && $store_version !== 'store-
v2' ) : ?>

<div class="store-social-wrapper">

<ul class="store-social">

<?php foreach( $social_fields as $key =>

$field ) { ?>

<?php if ( !empty( $social_info[ $key ] ) ) { ?

>

<li>

<a href="<?php echo

esc_url( $social_info[ $key ] ); ?>" target="_blank"><i class="fa fa-<?
php echo esc_attr( $field['icon'] ); ?>"></i></a>

</li>

<?php } ?>

<?php } ?>

</ul>

</div>

<?php endif; ?>

</div> <!-- .profile-info -->

<?php if ( $store_version === 'store-v3' ) : ?>

<div class="dokan-store-rating">

<?php

173
 $vendor = dokan()->vendor->get( $store_id );

$rating = dokan_get_seller_rating($store_id);

if ( ! $rating['count'] ) {

$html = __( 'No ratings found yet!', 'electro' );

} else {

$long_text = _n( '%d review', '%d reviews',

$rating['count'], 'electro' );

$text = sprintf( __( 'Rated %s out of %d',

'electro' ), $rating['rating'], number_format( 5 ) );

$width = ( $rating['rating']/5 ) * 100;

$review_text = sprintf( $long_text,

$rating['count'] );

if ( function_exists( 'dokan_get_review_url' ) ) {

$review_text = sprintf( '<span>%s</span>',

$review_text );

$html = '<span class="seller-rating">

<span title=" '. esc_attr( $text ) . '"

class="star-rating" itemtype="http://schema.org/Rating" itemscope=""
itemprop="reviewRating">

<span class="width" style="width: ' .

$width . '%"></span>
174
 <span style=""><strong
itemprop="ratingValue">' . $rating['rating'] . '</strong></span>

</span>

</span>

<span class="text">(' . $review_text .

')</span>';

echo wp_kses_post( $html );

?>

</div>

<?php endif; ?>

</div> <!-- .profile-summery-info-wrapper -->

<?php if ( is_dokan_pro_activated() && $store_version !==

'store-v5' ) : ?>

<?php if( ( $store_version !== 'store-v2' ) &&

( ( electro_dokan_store_support_exists() && $show_support_btn ) ||
electro_dokan_store_follow_exists() ||
( electro_dokan_store_share_exists() && ( $store_version === 'store-v3'
|| $store_version === 'store-v4' ) ) ) ) : ?>

<div class="dokan-store-support-and-follow-wrap">

<?php
175
 $vendor = dokan()->vendor->get( $store_id );

$store_info = dokan_get_store_info( $store_id );

if( electro_dokan_store_support_exists() &&

$show_support_btn ) {

if( version_compare( dokan_pro()->version,

'3.0.0' , '<' ) ) {

electro_remove_class_action( 'dokan_after_st
ore_tabs', 'Dokan_Store_Support', 'generate_support_button' );

} else {

electro_remove_class_action( 'dokan_after_st
ore_tabs', 'WeDevs\DokanPro\Modules\StoreSupport\Module',
'generate_support_button' );

?><div class="dokan-store-support-btn-wrap
dokan-right">

<button data-store_id="<?php echo $store_id;

?>" class="dokan-store-support-btn dokan-btn dokan-btn-theme dokan-
btn-sm <?php echo $user_logged_in ?>"><?php echo
esc_html( $support_text ); ?></button>

</div><?php

176
 if( electro_dokan_store_follow_exists() ) {

$follow_button = new
Dokan_Follow_Store_Follow_Button();

electro_remove_class_action( 'dokan_after_store
_tabs', 'Dokan_Follow_Store_Follow_Button',
'add_follow_button_after_store_tabs', 99 );

?><div class="dokan-store-follow-store-button-
container dokan-store-follow-store-btn-wrap">

<?php $follow_button-
>add_follow_button( $vendor->data, array( 'dokan-btn-sm' ) ); ?>

</div><?php

if( ( $store_version === 'store-v3' || $store_version

=== 'store-v4' ) && electro_dokan_store_share_exists() ) {

$dokan_social = version_compare( dokan_pro()-

>version, '3.0.0' , '<' ) ? Dokan_Pro_Store_Share::init() : dokan_pro()-
>store_share;

echo $dokan_social->render_html();

?>

</div>

<?php elseif ( ( $store_version == 'store-v2' ) ) : ?>

177
 <div class="dokan-store-support-and-rating-wrap">

<?php if ( electro_dokan_store_support_exists() &&

$show_support_btn ) : ?>

<?php

if( version_compare( dokan_pro()->version,

'3.0.0' , '<' ) ) {

electro_remove_class_action( 'dokan_after_st
ore_tabs', 'Dokan_Store_Support', 'generate_support_button' );

} else {

electro_remove_class_action( 'dokan_after_st
ore_tabs', 'WeDevs\DokanPro\Modules\StoreSupport\Module',
'generate_support_button' );

?>

<div class="dokan-store-support-btn-wrap">

<button data-store_id="<?php echo $store_id; ?

>" class="dokan-store-support-btn dokan-btn dokan-btn-theme dokan-
btn-sm <?php echo $user_logged_in ?>"><?php echo
esc_html( $support_text ); ?></button>

</div>

<?php endif; ?>

<div class="dokan-store-rating">

<?php

178
 $vendor = dokan()->vendor->get( $store_id );

$rating = dokan_get_seller_rating($store_id);

if ( ! $rating['count'] ) {

$html = __( 'No ratings found yet!', 'electro' );

} else {

$long_text = _n( '%d review', '%d reviews',

$rating['count'], 'electro' );

$text = sprintf( __( 'Rated %s out of %d',

'electro' ), $rating['rating'], number_format( 5 ) );

$width = ( $rating['rating']/5 ) * 100;

$review_text = sprintf( $long_text,

$rating['count'] );

if ( function_exists( 'dokan_get_review_url' ) ) {

$review_text = sprintf( '<span>%s</span>',

$review_text );

$html = '<span class="seller-rating">

<span title=" '. esc_attr( $text ) . '"

class="star-rating" itemtype="http://schema.org/Rating" itemscope=""
itemprop="reviewRating">

<span class="width" style="width: ' .

$width . '%"></span>
179
 <span style=""><strong
itemprop="ratingValue">' . $rating['rating'] . '</strong></span>

</span>

</span>

<span class="text">(' . $review_text .

')</span>';

echo wp_kses_post( $html );

?>

</div>

</div>

<?php endif; ?>

<?php elseif ( $store_version == 'store-v2' ) : ?>

<div class="dokan-store-rating">

<?php

$vendor = dokan()->vendor->get( $store_id );

$rating = dokan_get_seller_rating($store_id);

if ( ! $rating['count'] ) {

$html = __( 'No ratings found yet!', 'electro' );

} else {

180
 $long_text = _n( '%d review', '%d reviews',
$rating['count'], 'electro' );

$text = sprintf( __( 'Rated %s out of %d', 'electro'

), $rating['rating'], number_format( 5 ) );

$width = ( $rating['rating']/5 ) * 100;

$review_text = sprintf( $long_text, $rating['count'] );

if ( function_exists( 'dokan_get_review_url' ) ) {

$review_text = sprintf( '<span>%s</span>',

$review_text );

$html = '<span class="seller-rating">

CHAPTER 9

181
 CONCLUSION

9.1 PROJECT CONCLUSION

About 58 per cent of total population is dependent on agriculture in India;

among them about 80 per cent are marginal and small farmers category
other are large farmers. They have regular demand of agri inputs but they
are buying forcefully from the retailers due to credits or loan. Even they
face the same problem during of marketing of farm products.
Government supportingfarmers by different ways but outcomes are not
satisfactory. There is still the adequate supply of quality seeds, pesticides,
farmimplements and other services at right time and reasonable price by
Agricultural Department and other agencies of State Government are not
ensured. There is inefficient and unreliable delivery of farm inputs and
agri services at higher prices.

9.2 PROJECT ENHANCEMENT

We will implemented the chat option, guest login, multiple language as

additional features to the system making system more user friendly. By
the help of this portal people will be able to get fresh food to eat and will
be able to explore parts of their nearby villages for picking up their
purchases and exploring the place establishing relation with farmers and
gaining profit by saving their money , adding profit directly to the farmer
helping farmers too.

CHAPTER 10

REFERENCES

182
WEB REFERENCE

1. MYSQL Server Tutorials: W3School, link:

https://www.w3schools.com/MYSQL

2. Web Development Tutorial, https://www.tutorialride.com/web-

technologies.htm

3. Relation Database Management,

www.tutorialspoint.com/MYSQL/MYSQL-rdbms-concepts.htm

4. .Net Framework for beginners,

www.dotnettricks.com/learn/netframework

5. Learn HTML for free, https://www.codecademy.com/learn/learn-

html

6. Learn Cascade Style Sheets,

https://www.codecademy.com/learn/learn-css

183