ONLINE DIGITAL PRODUCT WEBSITE Yash Ambre

ACCOHUB - ONLINE SHOPPING WEBSITE
A Project Report
Submitted in partial fulfillment of the

Requirements for the award of
DIPLOMA IN COMPUTER ENGINEERING

BY
Yash Subhash Ambre

Aman Ajij Sayyed
Abdulla Imtiyaz Gholasgaonkar
Under the esteemed guidance of

MRS. MEGHA DHOTRE
DEPARTMENT OF COMPUTER ENGINEERING
BALASAHEB MHATRE POLYTECHNIC

Affiliated to
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(MSBTE)
2023-2024
1
DNYAN PRASARAK SHIKSHAN SANSTHA'S
BALASAHEB MHATRE POLYTECHNIC

AT-KANHOR-BADLAPUR, TAL-AMBERNATH, DIST.THANE
CERTIFICATE
This is to certify that Mr By Yash Subhash Ambre, Aman Ajij Sayyed,

Abdulla Imtiyaz Gholasgaonkar From BALASAHEB MHATRE
POLYTECHNIC Institute having Enrolment no. 2011460010,
1811460005,211160045 has completed project of final year having title
"ACCOHUB - ONLINE DIGITAL PRODUCT WEBSITE" during the
academic year 2023-2024. The project completed in a group under the
guidance of the faculty guide.
Submitted to the MSBTE in partial fulfilment of the requirement for the

award of Diploma in Computer Engineering
..................................
.................................. MS MEGHA DHORE
( )
...................................
................................... EXAMINER
( )
2
ABSTRACT
This project is a web based shopping system for an existing

shop. The project objective is to deliver the online shopping
application into android platform.
This project is an attempt to provide the advantages of online

shopping to customers of a real shop. It helps buying the
products in the shop anywhere through internet by using an
android device. Thus the customer will get the service of
online shopping and home delivery from his favorite shop. This
system can be implemented to any shop in the locality or to
multinational branded shops having retail outlet chains.
If shops are providing an online portal where their customers
can enjoy easy shopping from anywhere, the shops won’t be
losing any more customers to the trending online shops such
as flipkart or ebay. Since the application is available in the
Smartphone it is easily accessible and always available.
3
LIST OF FIGURES
o Admin Module
o Manage Moderators
o Manage Products
o Manage Users
o Manage Orders
o Moderator Module
o User Module
E-R Diagrams & DFD
3.5 Login
3.6 User Details
3.7 Products Details
3.8 Products Orders
3.9 COMPLETE DIAGRAM
3.10 LOGIN DFD
3.11 REGISTRATION DFD
3.12 ADMIN DFD
3.13 MODERATOR DFD
LIST OF TABLES
3.1 LOGIN TABLE

3.2 USER DETAILS
3.3 PRODUCT DETAILS
3.4 PRODUCT ORDERS
4
ACKNOWLEDGEMENT
I take this occasion to thank God, almighty for blessing us with
his grace and taking our endeavor to a successful culmination.
I extend my sincere and heartfelt thanks to our esteemed
guide, Mrs. Megha D, for providing me with the right guidance
and advice at the crucial junctures and for showing me the
right way. I extend my sincere thanks to our respected Head
of the division Mrs. MEGHA DHOTRE, for allowing us to use
the facilities available. I would like to thank the other faculty
members also, at this occasion. Last but not the least, I would
like to thank my friends and family for the support and
encouragement they have given me during the course of our
work.
5
TABLE OF CONTENTS
ABSTRACT
LIST OF FIGURE
LIST OF TABLES
ACKNOWLEDEGEMENT
• INTRODUCTION
PAGE
o PROJECT OBJECTIVE
8
o PROJECT OVERVIEW
8
o PROJECT SCOPE
9
o STUDY OF SYSTEMS
9
§ MODULES
9
• ADMIN
10
• MODERATOR
11
• USER
13
• SYSTEM ANALYSIS
18
o EXISTING SYSTEM
18
6
o PROPOSED SYSTEM
18
o SYSTEM REQUIREMENT SPECIFICATION
19
§ GENERAL DESCRIPTION
19
§ SYSTEM OBJECTIVES
19
§ SYSTEM REQUIREMENT
19
• NON FUNCTIONAL REQUIREMENT
19
• FUNCTIONAL REQUIREMENT
20
7
• SYSTEM DESIGN
23
o INPUT AND OUTPUT DESIGN
24
§ INPUT DESIGN
24
§ OUTPUT DESIGN
24
o DATABASE
25
o SYSTEM TOOLS
25
§ FRONT END
26
§ BACK END
27
o TABLES
28
o E-R DIAGRAMS
30
o DATA FLOW DIAGRAMS (DFD)
32
o SCREEN SHOTS
36
o SAMPLE CODES
43
• CONCLUSION
131
• REFERENCES
132
8
INTRODUCTION
This project is a web based shopping system for an existing shop. The
project objective is to deliver the online shopping application into
android platform.
Online shopping is the process whereby consumers directly buy goods

or services from a seller in real-time, without an intermediary service,
over the Internet. It is a form of electronic commerce. This project is
an attempt to provide the advantages of online shopping to customers
of a real shop. It helps buying the products in the shop anywhere
through internet by using an android device. Thus the customer will
get the service of online shopping and home delivery from his favorite
shop.
1.1 PROJECT OBJECTIVE:
The objective of the project is to make an application in android

platform to purchase items in an existing shop. In order to build such
an application complete web support need to be provided. A complete
and efficient web application which can provide the online shopping
experience is the basic objective of the project. The web application
can be implemented in the form of an android application with web
view.
1.2 PROJECT OVER VIEW:
The central concept of the application is to allow the customer to

shop virtually using the Internet and allow customers to buy the
items and articles of their desire from the store. The information
pertaining to the products are stores on an RDBMS at the server side
(store).
9
The Server process the customers and the items are shipped to the
address submitted by them. The application was designed into two
modules first is for the customers who wish to buy the articles.
Second is for the storekeepers who maintains and updates the
information pertaining to the articles and those of the customers.
The end user of this product is a departmental store where the
application is hosted on the web and the administrator maintains the
database. The application which is deployed at the customer
database, the details of the items are brought forward from the
database for the customer view based on the selection through the
menu and the database of all the products are updated at the end of
each transaction. Data entry into the application can be done
through various screens designed for various levels of users. Once
the authorized personnel feed the relevant data into the system,
several reports could be generated as per the security.
1.3 PROJECT SCOPE:
This system can be implemented to any shop in the locality or to

multinational branded shops having retail outlet chains. The system
recommends a facility to accept the orders 24*7 and a home delivery
system which can make customers happy.
If shops are providing an online portal where their customers can

enjoy easy shopping from anywhere, the shops won’t be losing any
more customers to the trending online shops such as flipcart or ebay.
Since the application is available in the Smartphone it is easily
accessible and always available.
1.4 STUDY OF THE SYSTEM
1.4.1 MODULES:
The system after careful analysis has been identified to be presented

with the following modules and roles.
The modules involved are:
10
2 Administrator
3 Moderators
4 Users
1.4.1.1 ADMINISTRATOR
The administrator is the super user of this application. Only admin

have access into this admin page. Admin may be the owner of the
shop. The administrator has all the information about all the users
and about all products.
This module is divided into different sub-modules.
• Manage Moderators
• Manage Products
• Manage Users
• Manage Orders
MANAGE
PRODUCT
MANAGE USER ADMIN MANAGE ORDER
MANAGE
MODERATOR
Fig 1.1: Admin module
11
MANAGE MODERATOR
SEARCH
MODERATOR
BLOCK MANAGE ADD

MODERATOR MODERATOR MODERATOR
REMOVE
MODERATOR
Fig 1.2: Manage Moderator
1 Add Moderator
Only admin is having the privilege to add a moderator. A moderator

can be considered as a staff who manages the orders or owner of a
group of products.
2 Block moderator
Admin can restrict a moderator from managing the orders by

blocking them. Admin can unblock a blocked user if needed.
12
1 Remove Moderator
Admin has privilege to delete a moderator who was added.
2 Search moderator
All existing moderators can be viewed by the administrator as a list.

If there is number of moderators and admin need to find one of
them, the admin can search for a moderator by name.
SEARCH
PRODUCTS
DELETE MANAGE
PRODUCTS PRODUCTS ADD PRODUCTS
VIEW PRODUCTS
Fig 1.3: Manage Products
3 Add Products
The shopping cart project contains different kind of products. The

products can be classified into different categories by name. Admin
13
can add new products into the existing system with all its details
including an image.
4 Delete Products
Administrator can delete the products based on the stock of that

particular product.
5 Search products
Admin will have a list view of all the existing products. He can also
search for a particular product by name.
MANAGE USER
BLOCK/UNBLOCK
USER
DELETE USER MANAGE USER ADD USER
VIEW PRODUCTS
Fig 1.4: Manage User
14
6 View Users
The admin will have a list view of all the users registered in the
system. Admin can view all the details of each user in the list except
password.
7 Add Users
Admin has privileges to add a user directly by providing the details.
8 Delete & Block Users
Administrator has a right to delete or block a user. The default status

of a new user registered is set as blocked. The admin must accept the
new user by unblocking him.
MANAGE ORDERS
DELETE ORDER MANAGE ORDER VIEW ORDER
Fig 1.5: Manage Orders
9 View Order
Administrator can view the Orders which is generated by the users.

He can verify the details of the purchase.
10 Delete order
Admin can delete order from the orders list when the product is
taken for delivery.
15
1.4.1.2 MODERATORS
MANAGE MANAGE
MODERATOR
PRODUCTS ORDERS
MANAGE USERS
Fig 1.6: Moderator Module
A moderator is considered as a staff who can manage orders for the

time being. As a future update moderator may give facility to add
and manage his own products . Moderators can reduce the work
load of admin. Now moderator has all the privilege an admin having
except managing other moderators. He can add products and users.
He can also check the orders and edit his profile.
1 Manage products
2 Manage users
3 Manage orders
1.4.1.3 USERS
16
VIEW PRODUCT
PURCHASE SEARCH
USER
PRODUCT PRODUCT
EDIT PROFILE
Fig 1.7: User Module
11 Registration
A new user will have to register in the system by providing essential

details in order to view the products in the system. The admin must
accept a new user by unblocking him.
12 Login
A user must login with his user name and password to the system
after registration.
13 View Products
User can view the list of products based on their names after
successful login. A detailed description of a particular product with
17
product name, products details, product image, price can be viewed
by users.
14 Search Product
Users can search for a particular product in the list by name.
15 Add to cart
The user can add the desired product into his cart by clicking add to
cart option on the product.
He can view his cart by clicking on the cart button. All products
added by cart can be viewed in the cart. User can remove an item
from the cart by clicking remove.
16 Submit Cart
After confirming the items in the cart the user can submit the cart by
providing a delivery address.On successful submitting the cart will
become empty.
17 History
In the history the user will have a view of pending orders.
18 Edit Profile
The user can view and edit the profile.
18
SYSTEM ANALYSIS
System analysis is the process of gathering and interpreting facts,

diagnosing problems and using the information to recommend
improvements on the system. System analysis is a problem solving
activity that requires intensive communication between the system
users and system developers.
System analysis or study is an important phase of any system

development process. The system is viewed as a whole, the inputs
are identified and the system is subjected to close study to identify
the problem areas. The solutions are given as a proposal. The
proposal is reviewed on user request and suitable changes are made.
This loop ends as soon as the user is satisfied with the proposal.
2.1 EXISTING SYSTEM
The current system for shopping is to visit the shop manually and
from the available product choose the item customer want and
buying the item by payment of the price of the item .
1. It is less user-friendly
2. User must go to shop and select products.
3. It is difficult to identify the required product.
4. Description of the product limited.
5. It is a time consuming process
6. Not in reach of distantusers.
1.1 PROPOSED SYSTEM
In the proposed system customer need not go to the shop for buying
the products. He can order the product he wish to buy through the
application in his Smartphone. The shop owner will be admin of the
system. Shop owner can appoint moderators who will help owner in
managing the customers and product orders. The system also
recommends a home delivery system for the purchased products.
19
2.3 SYSTEM REQUIREMENT SPECIFICATION
2.3.1 GENERAL DESCRIPTION
Product Description:
The system consists of two parts .A web application which can

provide the online shopping service and an android application for
the customer to access the web service from his Smartphone. Web
application should be able to help the customer for selecting his item
and to help the owner in managing the orders from the customers.
Problem Statement:
As online shopping became a trend nowadays the regular shops are

losing their customers to online brands. Customers have effortless
shopping experience and saving time through shopping online. For
competing with those online brands , If shops are providing an online
portal where their customers can shop through internet and get the
products at their doors it will increase the number of customers.
2.3.2 SYSTEM OBJECTIVES
• To provide an android application for online

shopping of products in an existing shop.
• To provide a online shopping web site for the same
shop.
2.3.3 SYSTEM REQUIREMENTS
2.3.3.1 NON FUNCTIONAL REQUIREMENTS
i. EFFICIENCY REQUIREMENT
When an online shopping cart android application implemented

customer can purchase product in an efficient manner.
ii. RELIABILITY REQUIREMENT
20
The system should provide a reliable environment to both customers
and owner. All orders should be reaching at the admin without any
errors.
iii. USABILITY REQUIREMENT
The android application is designed for user friendly environment

and ease of use.
iv. IMPLEMENTATION REQUIREMENT
Implementation of the system using css and html in front end with
jsp as back end and it will be used for database connectivity. And the
database part is developed by mysql. Responsive web designing is
used for making the website compatible for any type of screen.
v. DELIVERY REQUIREMENT
The whole system is expected to be delivered in four months of time

with a weekly evaluation by the project guide.
2.3.3.2 FUNCTIONAL REQUIREMENTS
USER
19 USER LOGIN
Description of feature
This feature used by the user to login into system. A user must login
with his user name and password to the system after registration. If
they are invalid, the user not allowed to enter the system.
Functional requirement
1. Username and password will be provided after user registration

is confirmed.
2. Password should be hidden from others while typing it in the
field
21
20 REGISTER NEW USER
A new user will have to register in the system by providing essential

details in order to view the products in the system. The admin must
accept a new user by unblocking him.
• System must be able to verify and validate information.

• The system must encrypt the password of the customer to
provide security.
> PURCHASING AN ITEM
The user can add the desired product into his cart by clicking add to
cart option on the product. He can view his cart by clicking on the
cart button. All products added by cart can be viewed in the cart.
User can remove an item from the cart by clicking remove. After
confirming the items in the cart the user can submit the cart by
providing a delivery address. On successful submitting the cart will
become empty.
» System must ensure that, only a registered customer can

purchase items.
ADMIN
21 MANAGE USER
The administrator can add user, delete user, view user and block
user.
22
22 MANAGE MODERATOR
The administrator can add moderator, delete moderator, block

moderator and search for a moderator.
» MANAGE PRODUCTS
The administrator can add product, delete product and view product.
23 MANAGE ORDERS
» The administrator can view orders and delete orders.
Functional requirements
• The system must identify the login of the admin.

• Admin account should be secured so that only owner of the
shop can access that account
MODERATOR
Description of features
A moderator is considered as a staff who can manage orders for the

time being. As a future update moderator may give facility to add
and manage his own products. Moderators can reduce the work load
of admin. Now moderator has all the privilege of an admin having
except managing other moderators. He can manage users and
manage products. He can also check the orders and edit his profile.
24 The system must identify the login of a moderator.
23
SYSTEM DESIGN
System design is the solution for the creation of a new system. This
phase focuses on the detailed implementation of the feasible
system. It emphasis on translating design. Specifications to
performance specification. System design has two phases of
development
25 Logical design
26 Physical design
During logical design phase the analyst describes inputs (sources),

output s(destinations), databases (data sores) and procedures (data
flows) all in a format that meets the user requirements. The analyst
also specifies the needs of the user at a level that virtually
determines the information flow in and out of the system and the
data resources. Here the logical design is done through data flow
diagrams and database design. The physical design is followed by
physical design or coding. Physical design produces the working
system by defining the design specifications, which specify exactly
what the candidate system must do. The programmers write the
necessary programs that accept input from the user, perform
necessary processing on accepted data and produce the required
report on a hard copy or display it on the screen.
3.1 INPUT AND OUTPUT DESIGN
3.1.1 INPUT DESIGN
Input design is the link that ties the information system into the
world of its
users. The input design involves determining the inputs, validating

the data, minimizing the data entry and provides a multi-user facility.
Inaccurate inputs are the most common cause of errors in data
processing. Errors entered by the data entry operators can be
controlled by input design. The user-originated inputs are converted
24
to a computer based format in the input design. Input data are
collected and organized into groups of similar data. Once identified,
the appropriate input media are selected for processing. All the input
data are validated and if any data violates any conditions, the user is
warned by a message. If the data satisfies all the conditions, it is
transferred to the appropriate tables in the database. In this project
the student details are to be entered at the time of registration. A
page is designed for this purpose which is user friendly and easy to
use. The design is done such that users get appropriate messages
when exceptions occur.
3.1.2 OUTPUT DESIGN
Computer output is the most important and direct source of

information to the user. Output design is a very important phase
since the output needs to be in an efficient manner. Efficient and
intelligible output design improves the system relationship with the
user and helps in decision making. Allowing the user to view the
sample screen is important because the user is the ultimate judge of
the quality of output. The output module of this system is the
selected notifications.
3.2 DATABASE
DATABASE DESIGN
Databases are the storehouses of data used in the software systems.

The data is stored in tables inside the database. Several tables are
created for the manipulation of the data for the system. Two
essential settings for a database are
2. Primary key - the field that is unique for all the record
occurrences.
3. Foregin Key - the field used to set relation between tables.
Normalization is a technique to avoid redundancy in the tables.
25
3.3 SYSTEM TOOLS
The various system tools that have been used in developing both the
front end and the back end of the project are being discussed in this
chapter.
3.3.1.FRONT END
HTML, CSS, JAVA SCRIPT,PHP, LARAVEL are utilized to implement the

frontend.
1. LARAVEL
Laravel is an open-source PHP framework, which is robust and

easy to understand. It follows a model-view-controller design
pattern. Laravel reuses the existing components of different
frameworks which helps in creating a web application. The web
application thus designed is more structured and pragmatic.
Laravel offers a rich set of functionalities which incorporates the
basic features of PHP frameworks like CodeIgniter, Yii and other
programming languages like Ruby on Rails. Laravel has a very
rich set of features which will boost the speed of web
development.
If you are familiar with Core PHP and Advanced PHP, Laravel will
make your task easier. It saves a lot time if you are planning to
develop a website from scratch. Moreover, a website built in
Laravel is secure and prevents several web attacks.
1. HTML (Hyper Text Markup Language)
HTML is a syntax used to format a text document on the web.
2. CSS (Cascading Style Sheets)
CSS is a style sheet language used for describing the look and
formatting of a document written in a markup language.
26
3. Java Script
JS is a dynamic computer programming language. It is most

commonly used as part of web browsers, whose
implementations allow client-side scripts to interact with the
user, control the browser, communicate asynchronously, and
alter the document content that is displayed.
Java Script is used to create pop up windows displaying

different alerts in the system like “User registered successfully”,
”Product added to cart” etc.
4. PHP (Hypertext Preprocessor)
PHP is a server side scripting language that is embedded in

HTML. It is used to manage dynamic content, databases,
session tracking, even build entire e-commerce sites. It is
integrated with a number of popular databases, including
MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft
SQL Server.
3.3.2 BACK END
The back end is implemented using MySQL which is used to design

the databases.
MySQL
MySQL is the world's second most widely used open-source

relational database management system (RDBMS). The SQL phrase
stands for Structured Query Language.
An application software called Navicat was used to design the tables

in MySQL.
27
3.4 TABLES
2 LOGIN
Field Field Type Default Allow PriKey Extra

Name Null
UID int(11) FIRST NO YES AUTO_INCREMENT
UNAME Varchar (50) NO NO
AFTER ‘UNAME’
UPASS Varchar (50) NO NO
AFTER ‘UPASS’
UTYPE Varchar (20) NO NO
AFTER ‘UTYPE’
ENABLED Varchar (10) NO NO
AFTER ‘ENABLED’
Fig 3.1: Login Table
3 USER DETAILS
Field Name Field Type Default Allow PriKey Extra

Null
UID int(11) FIRST NO YES
ULOGINNAME Varchar (50) AFTER NO NO
‘UID’
UEMAILID Varchar (100) AFTER NO NO
‘ULOGINNAME’
UMOBNO Varchar (30) AFTER NO NO
‘UEMAILID’
Fig 3.2: User Details Table
28
4 PRODUCT DETAILS

Null
ID int(11) FIRST NO YES AUTO_INCREMENT
NAME Varchar (100) NO NO
AFTER ‘NAME’
DESCRIPTION Varchar (500) YES NO
AFTER
‘DESCRIPTION’
PRICE Varchar (50) YES NO
AFTER ‘PRICE’
PHOTO Varchar (30) YES NO
AFTER ‘PHOTO’
Fig 3.3: Product Details Table
5 PRODUCT ORDERS

Null
ID int(11) FIRST NO YES AUTO_INCREMENT
PRODUCT_ID int(11) AFTER NO NO
‘ID’
USER_ID int(11) AFTER NO NO
‘product_id’
DEILVER Varchar (500) YES NO
ADDRESS AFTER ‘user_id’
Fig 3.4: Product Orders table
29
3.5 E-R DIAGRAMS
6 LOGIN
Login
User id User Name Status Password User type
Fig 3.5: Login
7 USER DETAILS
User Details
User Id Login Name Email id Mobile Number
Fig 3.6: User Details
8 PRODUCT DETAILS
Product Details
Product id Product Name Photo Description Price
Fig 3.7: Product Details
30
9 PRODUCT ORDERS
Product Orders
Deilvery
Order ID Product ID User ID
Address
Fig 3.8: Product Orders
10 COMPLETE DIAGRAM
User order Products
Product
user id Product id user id Products id
Name
Login deilvery
order id Photo Description
Name address
Email Id Price
Mobile NO
Fig 3.9: Complete Diagram
31
3.6 DATA FLOW DIAGRAM
A Data Flow Diagram (DFD) is a structured analysis and design tool

that can be used for flowcharting. A DFD is a network that describes
the flow of data and the processes that change or transform the data
throughout a system. This network is constructed by using a set
ofsymbols that do not imply any physical implementation. It has the
purpose of clarifying system
requirements and identifying major transformations. So it is the

starting point of the design phase that functionally decomposes the
requirements specifications down to the lowest level of detail. DFD
can be considered to an abstraction of the logic of an information-
oriented or a process-oriented system flow-chart. For these reasons
DFD’s are often referred to as logical data flow diagrams.
EXTERNAL ENTITY
An external entity is a source or destination of a data flow. Only

those entities which originate or receive data are represented on a
data flow diagram. The symbol used is a rectangular box.
PROCESS
A process shows a transformation or manipulation of data flow

within the system. The symbol used is an oval shape.
DATAFLOW
The data flow shows the flow of information from a source to its
destination. Data flow is represented by a line, with arrowheads
showing the direction of flow. Information always flows to or from a
process and may be written, verbal or electronic. Each data flow may
be referenced by the processes or data stores at its head and tail, or
by a description of its contents.
DATA STORE
32
A data store is a holding place for information within the system: It is
represented by an open ended narrow rectangle. Data stores may be
long-term files such as sales ledgers, or may be short-term
accumulations: for example batches of documents that are waiting
to be processed. Each data store should be given a reference
followed by an arbitrary number.
11 LOGIN DFD
LOGIN DB
ENTER USERNAME CHECK

USER & PASSWORD VALIDITY
IF YES
MAIN PAGE
Fig 3.10: Login DFD
33
12 REGISTRATION DFD
REGISTRA
ATION DB
CHECK
USER ENTER DETAILS VALIDITY
SUCCESSFUL
LOGIN PAGE
Fig 3.11: Registration DFD
34
13 ADMIN DFD ADD/
REMOVE
USER
DETAIL
DB
MANAGE
MODERATOR
BLOCK/
SEARCH
ADD/
REMOVE
MANAGE BLOCK
USER /VIEW
ADMIN
ADD/ PRODUCT
DELETE DETAIL
DB
MANAGE
PRODUCT
SEARCH
VIEW
MANAGE
ORDER
PRODUCT
DELETE ORDER
DB
35
14 MODERATOR DFD USER
ADD/
REMOVE DETAIL
DB
MANAGE
USER
BLOCK
/VIEW
ADD/ PRODUCT
DELETE
DETAIL
DB
MANAGE
MODERATOR
PRODUCT
SEARCH
VIEW
MANAGE
ORDER
DELETE PRODUCT
ORDER
DB
Fig 3.13: Moderator DFD
36
3.7 SCREEN SHOTS
15 LOGIN PAGE ADMIN SIDE
16 ADMIN PANEL
37
17 PRODUCTS PAGE ADMIN SIDE
18 SELLER REGISTRATION
38
19 SELLER SIDE DASHBOARD
20 CUSTOMER LOGIN PAGE
39
21 CUSTOMER REGISTRATION PAGE
22 CUSTOMER SIDE DASHBOARD
40
23 INSIDE PRODUCT PAGE
24 HOME PAGE ( INDEX PAGE )
41
25 MY CART (CART PAGE)
26 SHIPPING INFO (CART PAGE )
42
27 PAYMENT PAGE
28 THANK YOU PAGE
43
3.8 SAMPLE CODE
29 LOGIN PAGE ( ADMIN)
<!doctype html>
<html lang="en">
<head>
<meta name="csrf-token"
content="S3vzAqscgglAiQxW6LOuldeIyxGud19HPR7X3DeZ">
<meta name="app-url"
content="//accunityservices.com/wordpress/accohub/">
<meta name="file-base-url"
content="//accunityservices.com/wordpress/accohub/public/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-

scale=1, shrink-to-fit=no">
<link rel="icon"
href="https://accunityservices.com/wordpress/accohub/public/asset
s/img/placeholder.jpg">
<title> | </title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500
,600,700">
44
s/css/vendors.css">
s/css/aiz-core.css">
<style>
body {
font-size: 12px;
</style>
<script>
var AIZ = AIZ || {};
AIZ.local = {
nothing_selected: 'Nothing selected',
nothing_found: 'Nothing found',
choose_file: 'Choose File',
file_selected: 'File selected',
files_selected: 'Files selected',
add_more_files: 'Add more files',
adding_more_files: 'Adding more files',
45
</div>
</div>
<script
src="https://accunityservices.com/wordpress/accohub/public/assets
/js/vendors.js"></script>
<script
/js/aiz-core.js"></script>
<script type="text/javascript">
function autoFill(){
$('#email').val('admin@example.com');
$('#password').val('123456');
</script>
AIZ.plugins.notify('danger', 'Invalid login credentials');
</script>
</body>
</html>
30 ADMIN DASHBOARD
<html lang="en">
46
<head>
content="JIJCgxsYYVtzi7nmKrQ9kzrSCk7tFv4tv7inydno">

scale=1, shrink-to-fit=no">
<link rel="icon"
<title> | </title>
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500
,600,700">
s/css/vendors.css">
47
<style>
body {
font-size: 12px;
</style>
<script>
AIZ.local = {
drop_files_here_paste_or: 'Drop files here, paste or',
browse: 'Browse',
upload_complete: 'Upload complete',
upload_paused: 'Upload paused',
48
resume_upload: 'Resume upload',
pause_upload: 'Pause upload',
retry_upload: 'Retry upload',
cancel_upload: 'Cancel upload',
uploading: 'Uploading',
processing: 'Processing',
complete: 'Complete',
file: 'File',
files: 'Files',
</script>
</head>
<body class>
<div class="aiz-main-wrapper">
<div class="aiz-sidebar-wrap">
<div class="aiz-sidebar left c-scrollbar">
<div class="aiz-side-nav-logo-wrap">
<a href="https://accunityservices.com/wordpress/accohub/admin"
class="d-block text-left">
<img class="mw-100"
src="https://accunityservices.com/wordpress/accohub/public/uploa
49
ds/all/E5tPTg2P460lm5RH2BPOT5IAGyDZmX8iaCxfBUQk.png"
class="brand-icon" alt>
</a>
</div>
<div class="aiz-side-nav-wrap">
<div class="px-20px mb-3">
<input class="form-control bg-soft-secondary border-0 form-control-

sm text-white" type="text" name placeholder="Search in menu"
id="menu-search" onkeyup="menuSearch()">
</div>
<ul class="aiz-side-nav-list" id="search-menu">
</ul>
<ul class="aiz-side-nav-list" id="main-menu" data-toggle="aiz-side-

menu">
<li class="aiz-side-nav-item">
<a href="https://accunityservices.com/wordpress/accohub/admin"
class="aiz-side-nav-link">
<i class="las la-home aiz-side-nav-icon"></i>
<span class="aiz-side-nav-text">Dashboard</span>
</a>
</li>
50
<a href="#" class="aiz-side-nav-link">
<i class="las la-shopping-cart aiz-side-nav-icon"></i>
<span class="aiz-side-nav-text">Products</span>
<span class="aiz-side-nav-arrow"></span>
</a>
<ul class="aiz-side-nav-list level-2">
<a class="aiz-side-nav-link"
href="https://accunityservices.com/wordpress/accohub/admin/prod
ucts/create">
<span class="aiz-side-nav-text">Add New Product</span>
</a>
</li>
<a
ucts/all" class="aiz-side-nav-link">
<span class="aiz-side-nav-text">All products</span>
</a>
</li>
51
<a
ucts/admin" class="aiz-side-nav-link ">
<span class="aiz-side-nav-text">In House Products</span>
</a>
</li>
<a
ucts/seller" class="aiz-side-nav-link ">
<span class="aiz-side-nav-text">Seller Products</span>
</a>
</li>
<a
href="https://accunityservices.com/wordpress/accohub/admin/digit
alproducts" class="aiz-side-nav-link ">
<span class="aiz-side-nav-text">Digital Products</span>
</a>
</li>
52
<a
uct-bulk-upload/index" class="aiz-side-nav-link">
<span class="aiz-side-nav-text">Bulk Import</span>
</a>
</li>
<a
uct-bulk-export" class="aiz-side-nav-link">
<span class="aiz-side-nav-text">Bulk Export</span>
</a>
script type="text/javascript">
AIZ.plugins.chart('#pie-1',{
type: 'doughnut',
data: {
labels: [
'Total published products',
'Total sellers products',
'Total admin products'
],
datasets: [
53
{
data: [
4,
0,
],
backgroundColor: [
"#fd3995",
"#34bfa3",
"#5d78ff",
'#fdcb6e',
'#d35400',
'#8e44ad',
'#006442',
'#4D8FAC',
'#CA6924',
'#C91F37'
},
54
options: {
cutoutPercentage: 70,
legend: {
labels: {
fontFamily: 'Poppins',
boxWidth: 10,
usePointStyle: true
},
onClick: function () {
return '';
},
position: 'bottom'
});
{_token:'JIJCgxsYYVtzi7nmKrQ9kzrSCk7tFv4tv7inydno', locale:locale},
function(data){
location.reload();
});
});
55
});
function menuSearch(){
var filter, item;
filter = $("#menu-search").val().toUpperCase();
items = $("#main-menu").find("a");
items = items.filter(function(i,item){
if($(item).find(".aiz-side-nav-
text")[0].innerText.toUpperCase().indexOf(filter) > -1 &&
$(item).attr('href') !== '#'){
return item;
});
if(filter !== ''){
$("#main-menu").addClass('d-none');
$("#search-menu").html('')
if(items.length > 0){
for (i = 0; i < items.length; i++) {
const text = $(items[i]).find(".aiz-

side-nav-text")[0].innerText;
const link = $(items[i]).attr('href');
56
$("#search-menu").append(`<li
class="aiz-side-nav-item"><a href="${link}" class="aiz-side-nav-
link"><i class="las la-ellipsis-h aiz-side-nav-
icon"></i><span>${text}</span></a></li`);
}else{
$("#search-menu").html(`<li class="aiz-
side-nav-item"><span class="text-center text-muted d-
block">Nothing found</span></li>`);
}else{
$("#main-menu").removeClass('d-none');
$("#search-menu").html('')
</script>
</body>
</html>
31 CUSTOMER REGISTRATION PAGE
<!DOCTYPE html>
<html lang="en">
<head>
57
content="u451i2LrjUBvUc4b1uErIVAw3BQWUtkbmiVlPnGJ">
<title> | </title>

scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content />
<meta name="keywords" content>
<meta itemprop="name" content>
<meta itemprop="description" content>
<meta itemprop="image"
content="https://accunityservices.com/wordpress/accohub/public/a
ssets/img/placeholder.jpg">
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content>
58
<meta name="twitter:description" content>
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image"
<meta property="og:title" content />
<meta property="og:type" content="website" />
<meta property="og:url"
content="https://accunityservices.com/wordpress/accohub" />
<meta property="og:image"
ssets/img/placeholder.jpg" />
<meta property="og:description" content />
<meta property="og:site_name" content />
<meta property="fb:app_id" content>
<link rel="icon"
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,
400,400i,600,600i,700,700i,800,800i&display=swap"
rel="stylesheet">
59
s/css/vendors.css">
s/css/custom-style.css">
<script>
AIZ.local = {
browse: 'Browse',
60
file: 'File',
files: 'Files',
</script>
<style>
body{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
:root{
--primary: #e62e04;
--hov-primary: #e62e04;
--soft-primary: rgba(230,46,4,0.15);
61
}
#map{
width: 100%;
height: 250px;
#edit_map{
width: 100%;
height: 250px;
.pac-container { z-index: 100000; }
</style>
</head>
<body>
<div class="col-5 text-right d-none d-lg-block">
<ul class="list-inline mb-0 h-100 d-flex justify-content-end align-

items-center">
<li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
<a
href="https://accunityservices.com/wordpress/accohub/users/login"
class="text-reset d-inline-block opacity-60 py-2">Login</a>
62
</li>
<li class="list-inline-item">
<a
href="https://accunityservices.com/wordpress/accohub/users/regist
ration" class="text-reset d-inline-block opacity-60 py-
2">Registration</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<header class=" sticky-top z-1020 bg-white border-bottom shadow-

sm">
<div class="position-relative logo-bar-area z-1">
<div class="container">
<div class="d-flex align-items-center">
<div class="col-auto col-xl-3 pl-0 pr-3 d-flex align-items-center">
<a class="d-block py-20px mr-3 ml-0"

href="https://accunityservices.com/wordpress/accohub">
<img
63
ds/all/E5tPTg2P460lm5RH2BPOT5IAGyDZmX8iaCxfBUQk.png" alt
class="mw-100 h-30px h-md-40px" height="40">
</a>
<div class="d-none d-xl-block align-self-stretch category-menu-icon-

box ml-auto mr-0">
<div class="h-100 d-flex align-items-center" id="category-menu-

icon">
<div class="dropdown-toggle navbar-light bg-light h-40px w-50px pl-

2 rounded border c-pointer">
<span class="navbar-toggler-icon"></span>
</div>
</div>
</div>
</div>
<div class="d-lg-none ml-auto mr-0">
<a class="p-2 d-block text-reset" href="javascript:void(0);" data-

toggle="class-toggle" data-target=".front-header-search">
<i class="las la-search la-flip-horizontal la-2x"></i>
</a>
</div>
<div class="flex-grow-1 front-header-search d-flex align-items-center

bg-white">
<div class="position-relative flex-grow-1">
64
<form
action="https://accunityservices.com/wordpress/accohub/search"
method="GET" class="stop-propagation">
<div class="d-flex position-relative align-items-center">
<div class="d-lg-none" data-toggle="class-toggle" data-

target=".front-header-search">
<button class="btn px-2" type="button"><i class="la la-2x la-long-

arrow-left"></i></button>
</div>
<div class="input-group">
<input type="text" class="border-0 border-lg form-control"

id="search" name="keyword" placeholder="I am shopping for..."
autocomplete="off">
<div class="input-group-append d-none d-lg-block">
<button class="btn btn-primary" type="submit">
<i class="la la-search la-flip-horizontal fs-18"></i>
</button>
</div>
</div>
</div>
</form>
<div class="typed-search-box stop-propagation document-click-d-

none d-none bg-white rounded shadow-lg position-absolute left-0
top-100 w-100" style="min-height: 200px">
65
<div class="search-preloader absolute-top-center">
<div class="dot-loader"><div></div><div></div><div></div></div>
</div>
<div class="search-nothing d-none p-3 text-center fs-16">
</div>
<div id="search-content" class="text-left">
</div>
</div>
</div>
</div>
<div class="d-none d-lg-none ml-3 mr-0">
<div class="nav-search-box">
<a href="#" class="nav-box-link">
<i class="la la-search la-flip-horizontal d-inline-block nav-box-

icon"></i>
</a>
</div>
</div>
<div class="d-none d-lg-block ml-3 mr-0">
<div class id="compare">
66
<a
href="https://accunityservices.com/wordpress/accohub/compare"
class="d-flex align-items-center text-reset">
<i class="la la-refresh la-2x opacity-80"></i>
<span class="flex-grow-1 ml-1">
<span class="badge badge-primary badge-inline badge-

pill">0</span>
<span class="nav-box-text d-none d-xl-block opacity-

70">Compare</span>
</span>
</a> </div>
</div>
<div class id="wishlist">
<a
href="https://accunityservices.com/wordpress/accohub/wishlists"
<i class="la la-heart-o la-2x opacity-80"></i>

pill">0</span>

70">Wishlist</span>
</span>
67
</a>
</div>
</div>
<div class="d-none d-lg-block align-self-stretch ml-3 mr-0" data-

hover="dropdown">
<div class="nav-cart-box dropdown h-100" id="cart_items">
<a href="javascript:void(0)" class="d-flex align-items-center text-

reset h-100" data-toggle="dropdown" data-display="static">
<i class="la la-shopping-cart la-2x opacity-80"></i>
<span class="badge badge-primary badge-inline badge-pill cart-

count">0</span>

70">Cart</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-

menu-lg p-0 stop-propagation">
<div class="text-center p-3">
<i class="las la-frown la-3x opacity-60 mb-3"></i>
<h3 class="h6 fw-700">Your Cart is empty</h3>
</div>
</div>
68
<h1 class="h4 fw-600">
Create an account.
</h1>
</div>
<div class="px-4 py-3 py-lg-4">
<div class>
<form id="reg-form" class="form-default" role="form"

action="https://accunityservices.com/wordpress/accohub/register"
method="POST">
<input type="hidden" name="_token"

value="u451i2LrjUBvUc4b1uErIVAw3BQWUtkbmiVlPnGJ"> <div
class="form-group">
<input type="text" class="form-control" value placeholder="Full

Name" name="name">
</div>
<div class="form-group">
<input type="email" class="form-control" value placeholder="Email"

name="email">
</div>
<input type="password" class="form-control"

placeholder="Password" name="password">
</div>
69
<input type="password" class="form-control" placeholder="Confirm
Password" name="password_confirmation">
</div>
<div class="mb-3">
<label class="aiz-checkbox">
<input type="checkbox" name="checkbox_example_1" required>
<span class="opacity-60">By signing up you agree to our terms and

conditions.</span>
<span class="aiz-square-check"></span>
</label>
</div>
<div class="mb-5">
<button type="submit" class="btn btn-primary btn-block fw-

600">Create Account</button>
</div>
</form>
<div class="separator mb-3">
<span class="bg-white px-3 opacity-60">Or Join With</span>
</div>
<ul class="list-inline social colored text-center mb-5">
70
<a href="https://accunityservices.com/wordpress/accohub/social-
login/redirect/facebook" class="facebook">
<i class="lab la-facebook-f"></i>
</a>
</li>
login/redirect/google" class="google">
<i class="lab la-google"></i>
</a>
</li>
login/redirect/apple" class="apple">
<i class="lab la-apple"></i>
</a>
</li>
</ul>
</div>
<div class="text-center">
<p class="text-muted mb-0">Already have an account?</p>
71
<a
>Log In</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white border-top mt-auto">
<div class="row no-gutters">
<div class="col-lg-3 col-md-6">
<a class="text-reset border-left text-center p-4 d-block"

href="https://accunityservices.com/wordpress/accohub/terms">
<i class="la la-file-text la-3x text-primary mb-2"></i>
<h4 class="h6">Terms & conditions</h4>
</a>
</div>
72
href="https://accunityservices.com/wordpress/accohub/return-
policy">
<i class="la la-mail-reply la-3x text-primary mb-2"></i>
<h4 class="h6">return policy</h4>
</a>
</div>

href="https://accunityservices.com/wordpress/accohub/support-
policy">
<i class="la la-support la-3x text-primary mb-2"></i>
<h4 class="h6">Support Policy</h4>
</a>
</div>
<a class="text-reset border-left border-right text-center p-4 d-block"

href="https://accunityservices.com/wordpress/accohub/privacy-
policy">
<i class="las la-exclamation-circle la-3x text-primary mb-2"></i>
<h4 class="h6">privacy policy</h4>
</a>
</div>
73
</section>
<section class="bg-dark py-5 text-light footer-widget">
<div class="row">
<div class="col-lg-5 col-xl-4 text-center text-md-left">
<div class="mt-4">
<a href="https://accunityservices.com/wordpress/accohub"
class="d-block">
<img class="lazyload"
/img/placeholder-rect.jpg" data-
/img/logo.png" alt height="44">
</a>
<div class="my-3">
</div>
<div class="d-inline-block d-md-block mb-4">
<form class="form-inline" method="POST"

action="https://accunityservices.com/wordpress/accohub/subscribe
rs">
<input type="hidden" name="_token"

value="u451i2LrjUBvUc4b1uErIVAw3BQWUtkbmiVlPnGJ"> <div
class="form-group mb-0">
<input type="email" class="form-control" placeholder="Your Email

Address" name="email" required>
74
</div>
<button type="submit" class="btn btn-primary">
Subscribe
</button>
</form>
</div>
<div class="w-300px mw-100 mx-auto mx-md-0">
</div>
</div>
<div class="col-lg-3 ml-xl-auto col-md-4 mr-0">
<div class="text-center text-md-left mt-4">
<h4 class="fs-13 text-uppercase fw-600 border-bottom border-gray-

900 pb-2 mb-4">
Contact Info
</h4>
<ul class="list-unstyled">
<li class="mb-2">
<span class="d-block opacity-30">Address:</span>
<span class="d-block opacity-70"></span>
</li>
<li class="mb-2">
75
<span class="d-block opacity-30">Phone:</span>
<span class="d-block opacity-70"></span>
</li>
<li class="mb-2">
<span class="d-block opacity-30">Email:</span>
<span class="d-block opacity-70">
<a href="mailto:" class="text-reset"></a>
</span>
</li>
</ul>
</div>
</div>

900 pb-2 mb-4">
</h4>
</ul>
</div>
</div>
76
<div class="col-md-4 col-lg-2">

900 pb-2 mb-4">
My Account
</h4>
<li class="mb-2">
<a class="opacity-50 hov-opacity-100 text-reset"

>
Login
</a>
</li>
<li class="mb-2">

href="https://accunityservices.com/wordpress/accohub/purchase_hi
story">
Order History
</a>
</li>
<li class="mb-2">
77
href="https://accunityservices.com/wordpress/accohub/wishlists">
My Wishlist
</a>
</li>
<li class="mb-2">

href="https://accunityservices.com/wordpress/accohub/track-your-
order">
Track Order
</a>
</li>
</ul>
</div>

900 pb-2 mb-4">
Be A Seller
</h4>
<a
href="https://accunityservices.com/wordpress/accohub/shops/creat
e" class="btn btn-primary btn-sm shadow-md">
Apply Now
78
</a>
</div>
</div>
</section>
<footer class="pt-3 pb-7 pb-xl-3 bg-black text-light">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="text-center text-md-left" current-verison="6.5.0">
</div>
</div>
</div>
<div class="text-center text-md-right">
<ul class="list-inline mb-0">
</ul>
</div>
</footer>
<script>
79
$(document).ready(function() {
$('.category-nav-element').each(function(i, el) {
$(el).on('mouseover', function(){
if(!$(el).find('.sub-cat-menu').hasClass('loaded')){
$.post('https://accunityservices.com/wordpress/accohub/category/n
av-element-list', {_token: AIZ.data.csrf, id:$(el).data('id')},
function(data){
$(el).find('.sub-cat-
menu').addClass('loaded').html(data);
});
});
});
if ($('#lang-change').length > 0) {
$('#lang-change .dropdown-menu a').each(function() {
$(this).on('click', function(e){
e.preventDefault();
var $this = $(this);
var locale = $this.data('flag');
80
$.post('https://accunityservices.com/wordpress/accohub/language',{
_token: AIZ.data.csrf, locale:locale}, function(data){
location.reload();
});
});
});
if ($('#currency-change').length > 0) {
$('#currency-change .dropdown-menu a').each(function() {
$(this).on('click', function(e){
e.preventDefault();
var currency_code = $this.data('currency');
$.post('https://accunityservices.com/wordpress/accohub/currency',{
_token: AIZ.data.csrf, currency_code:currency_code}, function(data){
location.reload();
});
81
});
});
});
$('#search').on('keyup', function(){
search();
});
$('#search').on('focus', function(){
search();
});
function search(){
var searchKey = $('#search').val();
if(searchKey.length > 0){
$('body').addClass("typed-search-box-shown");
$('.typed-search-box').removeClass('d-none');
$('.search-preloader').removeClass('d-none');
82
$.post('https://accunityservices.com/wordpress/accohub/ajax-
search', { _token: AIZ.data.csrf, search:searchKey}, function(data){
if(data == '0'){
// $('.typed-search-box').addClass('d-none');
$('#search-content').html(null);
$('.typed-search-box .search-nothing').removeClass('d-
none').html('Sorry, nothing found for
<strong>"'+searchKey+'"</strong>');
$('.search-preloader').addClass('d-none');
else{
$('.typed-search-box .search-nothing').addClass('d-
none').html(null);
$('#search-content').html(data);
});
else {
$('.typed-search-box').addClass('d-none');
$('body').removeClass("typed-search-box-shown");
83
}
function updateNavCart(view,count){
$('.cart-count').html(count);
$('#cart_items').html(view);
function removeFromCart(key){
$.post('https://accunityservices.com/wordpress/accohub/cart/remo
veFromCart', {
_token : AIZ.data.csrf,
id : key
}, function(data){
updateNavCart(data.nav_cart_view,data.cart_count);
$('#cart-summary').html(data.cart_view);
AIZ.plugins.notify('success', "Item has been removed from

cart");
$('#cart_items_sidenav').html(parseInt($('#cart_items_sidenav').htm
l())-1);
});
84
}
function addToCompare(id){
$.post('https://accunityservices.com/wordpress/accohub/compare/a
ddToCompare', {_token: AIZ.data.csrf, id:id}, function(data){
$('#compare').html(data);
AIZ.plugins.notify('success', "Item has been added to

compare list");
$('#compare_items_sidenav').html(parseInt($('#compare_items_side
nav').html())+1);
});
function addToWishList(id){
AIZ.plugins.notify('warning', "Please login first");
function showAddToCartModal(id){
if(!$('#modal-size').hasClass('modal-lg')){
$('#modal-size').addClass('modal-lg');
85
$('#addToCart-modal-body').html(null);
$('#addToCart').modal();
$('.c-preloader').show();
$.post('https://accunityservices.com/wordpress/accohub/cart/show-
cart-modal', {_token: AIZ.data.csrf, id:id}, function(data){
$('.c-preloader').hide();
$('#addToCart-modal-body').html(data);
AIZ.plugins.slickCarousel();
AIZ.plugins.zoom();
AIZ.extra.plusMinus();
getVariantPrice();
});
$('#option-choice-form input').on('change', function(){
getVariantPrice();
});
function getVariantPrice(){
if($('#option-choice-form input[name=quantity]').val() > 0 &&

checkAddToCartValidity()){
86
$.ajax({
type:"POST",
url:
'https://accunityservices.com/wordpress/accohub/product/variant_
price',
data: $('#option-choice-form').serializeArray(),
success: function(data){
$('.product-gallery-thumb .carousel-box').each(function
(i) {
if($(this).data('variation') && data.variation ==

$(this).data('variation')){
$('.product-gallery-thumb').slick('slickGoTo', i);
})
$('#option-choice-form
#chosen_price_div').removeClass('d-none');
$('#option-choice-form #chosen_price_div
#chosen_price').html(data.price);
$('#available-quantity').html(data.quantity);
$('.input-number').prop('max', data.max_limit);
if(parseInt(data.in_stock) == 0 && data.digital == 0){
87
$('.buy-now').addClass('d-none');
$('.add-to-cart').addClass('d-none');
$('.out-of-stock').removeClass('d-none');
else{
$('.buy-now').removeClass('d-none');
$('.add-to-cart').removeClass('d-none');
$('.out-of-stock').addClass('d-none');
});
function checkAddToCartValidity(){
var names = {};
$('#option-choice-form input:radio').each(function() { // find

unique names
names[$(this).attr('name')] = true;
88
});
var count = 0;
$.each(names, function() { // then count them
count++;
});
if($('#option-choice-form input:radio:checked').length ==
count){
return true;
return false;
function addToCart(){
if(checkAddToCartValidity()) {
$.ajax({
type:"POST",
89
url:
'https://accunityservices.com/wordpress/accohub/cart/addtocart',
$('#modal-size').removeClass('modal-lg');
$('#addToCart-modal-body').html(data.modal_view);
});
else{
AIZ.plugins.notify('warning', "Please choose all the

options");
function buyNow(){
90
$.ajax({
type:"POST",
url:
if(data.status == 1){
window.location.replace("https://accunityservices.com/wordpress/a
ccohub/cart");
else{
91
});
else{

options");
</script>
var isPhoneShown = true,
countryData = window.intlTelInputGlobals.getCountryData(),
input = document.querySelector("#phone-code");
92
for (var i = 0; i < countryData.length; i++) {
var country = countryData[i];
if(country.iso2 == 'bd'){
country.dialCode = '88';
var iti = intlTelInput(input, {
separateDialCode: true,
utilsScript:
"https://accunityservices.com/wordpress/accohub/public/assets/js/i
ntlTelutils.js?1590403638580",
onlyCountries: ["IN"],
customPlaceholder: function(selectedCountryPlaceholder,
selectedCountryData) {
if(selectedCountryData.iso2 == 'bd'){
return "01xxxxxxxxx";
return selectedCountryPlaceholder;
});
93
var country = iti.getSelectedCountryData();
$('input[name=country_code]').val(country.dialCode);
input.addEventListener("countrychange", function(e) {
// var currentMask = e.currentTarget.placeholder;
var country = iti.getSelectedCountryData();
$('input[name=country_code]').val(country.dialCode);
});
function toggleEmailPhone(el){
if(isPhoneShown){
$('.phone-form-group').addClass('d-none');
$('.email-form-group').removeClass('d-none');
isPhoneShown = false;
$(el).html('Use Phone Instead');
else{
$('.phone-form-group').removeClass('d-none');
$('.email-form-group').addClass('d-none');
94
isPhoneShown = true;
$(el).html('Use Email Instead');
</script>
</body>
</html>
32 PRODUCTS PAGE
<!DOCTYPE html>
<html lang="en">
<head>
content="u451i2LrjUBvUc4b1uErIVAw3BQWUtkbmiVlPnGJ">
<title>Nike White Sneaker</title>

scale=1.0">
95
<meta name="description" content/>
<meta name="keywords" content="sneakrs,shoes,nike,cheap">
<meta itemprop="name" content="Nike White Sneaker">
content="https://accunityservices.com/wordpress/accohub/public/u
ploads/all/Gdo58K9E2xfnDwwJPgAAbFTipUKflkofUsMyBQx3.jpg">
<meta name="twitter:title" content="Nike White Sneaker">
ploads/all/Gdo58K9E2xfnDwwJPgAAbFTipUKflkofUsMyBQx3.jpg">
<meta name="twitter:data1" content="Rs5,000.00">
<meta name="twitter:label1" content="Price">
<meta property="og:title" content="Nike White Sneaker"/>
<meta property="og:type" content="og:product"/>
96
content="https://accunityservices.com/wordpress/accohub/product
/nike-white-sneaker"/>
ploads/all/Gdo58K9E2xfnDwwJPgAAbFTipUKflkofUsMyBQx3.jpg"/>
<meta property="og:description" content/>
<meta property="og:site_name" content/>
<meta property="og:price:amount" content="Rs5,000.00"/>
<meta property="product:price:currency" content="Rupee"/>
<link rel="icon"
<link
rel="stylesheet">
s/css/vendors.css">
97
<script>
AIZ.local = {
browse: 'Browse',
98
file: 'File',
files: 'Files',
</script>
<style>
body {
font-weight: 400;
}:root {
--primary: #e62e04;
--soft-primary: rgba(230, 46, 4, 0.15);
#map {
width: 100%;
99
height: 250px;
} #edit_map {
width: 100%;
height: 250px;
}.pac-container {
z-index: 100000;
</style>
</head>
<body>
<script>
$('.category-nav-element').each(function(i, el) {
$(el).on('mouseover', function() {
if (!$(el).find('.sub-cat-menu').hasClass('loaded')) {
$.post('https://accunityservices.com/wordpress/accohub/category/n
av-element-list', {
_token: AIZ.data.csrf,
id: $(el).data('id')
}, function(data) {
100
$(el).find('.sub-cat-
menu').addClass('loaded').html(data);
});
});
});
if ($('#lang-change').length > 0) {
$('#lang-change .dropdown-menu a').each(function() {
$(this).on('click', function(e) {
e.preventDefault();
var locale = $this.data('flag');
$.post('https://accunityservices.com/wordpress/accohub/language',
{
locale: locale
}, function(data) {
location.reload();
});
});
101
});
if ($('#currency-change').length > 0) {
$('#currency-change .dropdown-menu a').each(function() {
$(this).on('click', function(e) {
e.preventDefault();
var currency_code = $this.data('currency');
$.post('https://accunityservices.com/wordpress/accohub/currency',
{
currency_code: currency_code
}, function(data) {
location.reload();
});
});
});
});
102
$('#search').on('keyup', function() {
search();
});
$('#search').on('focus', function() {
search();
});
function search() {
var searchKey = $('#search').val();
if (searchKey.length > 0) {
$('body').addClass("typed-search-box-shown");
$('.typed-search-box').removeClass('d-none');
$('.search-preloader').removeClass('d-none');
$.post('https://accunityservices.com/wordpress/accohub/ajax-
search', {
search: searchKey
}, function(data) {
103
if (data == '0') {
// $('.typed-search-box').addClass('d-none');
$('#search-content').html(null);
$('.typed-search-box .search-nothing').removeClass('d-
none').html('Sorry, nothing found for <strong>"' + searchKey +
'"</strong>');
else {
$('.typed-search-box .search-nothing').addClass('d-
none').html(null);
$('#search-content').html(data);
});
else {
AIZ.plugins.notify('warning', "Please choose all the options");
</script>
104
getVariantPrice();
});
function CopyToClipboard(e) {
var url = $(e).data('url');
var $temp = $("<input>");
$("body").append($temp);
$temp.val(url).select();
try {
document.execCommand("copy");
AIZ.plugins.notify('success', 'Link copied to clipboard');
} catch (err) {
AIZ.plugins.notify('danger', 'Oops, unable to copy');
$temp.remove();
// if (document.selection) {
// var range = document.body.createTextRange();
//
range.moveToElementText(document.getElementById(containerid));
105
// range.select().createTextRange();
// document.execCommand("Copy");
// } else if (window.getSelection) {
// var range = document.createRange();
// document.getElementById(containerid).style.display =
"block";
// range.selectNode(document.getElementById(containerid));
// window.getSelection().addRange(range);
// document.execCommand("Copy");
// document.getElementById(containerid).style.display =
"none";
// }
// AIZ.plugins.notify('success', 'Copied');
function show_chat_modal() {
$('#login_modal').modal('show');
// Pagination using ajax
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
106
if (page == Number.NaN || page <= 0) {
return false;
} else {
getQuestions(page);
});
$(document).on('click', '.pagination a', function(e) {
getQuestions($(this).attr('href').split('page=')[1]);
e.preventDefault();
});
});
function getQuestions(page) {
$.ajax({
url: '?page=' + page,
dataType: 'json',
}).done(function(data) {
$('.pagination-area').html(data);
107
location.hash = page;
}).fail(function() {
alert('Something went worng! Questions could not be

loaded.');
});
// Pagination end
</script>
</body>
</html>
33 THANK YOU PAGE
<!DOCTYPE html>
<html lang="en">
<head>
content="9YQN5izfpXT1PApKOBVXFUl8we054CjFBdMMg3I6">
<title> | </title>
108
scale=1.0">
<meta name="description" content />
<meta name="keywords" content>
<meta itemprop="name" content>
<meta name="twitter:title" content>
<meta property="og:title" content />
<meta property="og:type" content="website" />
109
content="https://accunityservices.com/wordpress/accohub" />
ssets/img/placeholder.jpg" />
<meta property="og:description" content />
<meta property="og:site_name" content />
<link rel="icon"
<link
rel="stylesheet">
s/css/vendors.css">
110
<script>
AIZ.local = {
browse: 'Browse',
111
file: 'File',
files: 'Files',
</script>
<style>
body{
font-weight: 400;
:root{
--primary: #e62e04;
--soft-primary: rgba(230,46,4,0.15);
#map{
width: 100%;
height: 250px;
#edit_map{
width: 100%;
112
height: 250px;
.pac-container { z-index: 100000; }
</style>
</head>
<body>
<div class="aiz-main-wrapper d-flex flex-column">
<div class="top-navbar bg-white border-bottom border-soft-

secondary z-1035 h-35px h-sm-auto">
<div class="row">
<div class="col-lg-7 col">
<ul class="list-inline d-flex justify-content-between justify-content-lg-

start mb-0">
<li class="list-inline-item dropdown mr-3" id="lang-change">
<a href="javascript:void(0)" class="dropdown-toggle text-reset py-2"

data-toggle="dropdown" data-display="static">
113
<img
/img/placeholder.jpg" data-
/img/flags/en.png" class="mr-2 lazyload" alt="English" height="11">
<span class="opacity-60">English</span>
</a>
<ul class="dropdown-menu dropdown-menu-left">
<li>
<a href="javascript:void(0)" data-flag="en" class="dropdown-item ">
<img
/img/flags/en.png" class="mr-1 lazyload" alt="English" height="11">
<span class="language">English</span>
</a>
</li>
<li>
<a href="javascript:void(0)" data-flag="bd" class="dropdown-item ">
<img
/img/flags/bd.png" class="mr-1 lazyload" alt="Bangla" height="11">
<span class="language">Bangla</span>
114
</a>
</li>
<li>
<a href="javascript:void(0)" data-flag="sa" class="dropdown-item ">
<img
/img/flags/sa.png" class="mr-1 lazyload" alt="Arabic" height="11">
<span class="language">Arabic</span>
</a>
</li>
</ul>
</li>
<div class="col-5 text-right d-none d-lg-block">
<ul class="list-inline mb-0 h-100 d-flex justify-content-end align-

items-center">
<li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0

dropdown">
<a class="dropdown-toggle no-arrow text-reset" data-

toggle="dropdown" href="javascript:void(0);" role="button" aria-
haspopup="false" aria-expanded="false">
<span class>
<span class="position-relative d-inline-block">
115
<i class="las la-bell fs-18"></i>
<span class="badge badge-sm badge-dot badge-circle badge-primary

position-absolute absolute-top-right"></span>
</span>
</span>
</a>

menu-lg py-0">
<div class="p-3 bg-light border-bottom">
<h6 class="mb-0">Notifications</h6>
</div>
<div class="px-3 c-scrollbar-light overflow-auto " style="max-

height:300px;">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a
story/details/eyJpdiI6IkhYTXhYaHRkU2U3d1NxbnY0dFo1OFE9PSIsInZ
hbHVlIjoiQzU1U2dOTzc2TzJ6VGpCUHFOa0tWZz09IiwibWFjIjoiMWU3
NzYzMTcwNjk4MDI5NDlmOWU3M2E0NzdhYjEzYWJiZjQwOWQ2ZmE
yYWJmZmViMjJhODIwNjgxMDNkMmMwMiIsInRhZyI6IiJ9"
class="text-reset">
<span class="ml-2">
Order code: 20230414-18541772 has been Placed
116
</span>
</a>
</li>
<a
story/details/eyJpdiI6ImliT0U4d0lWdWdIVFErT0YxVnRJbUE9PSIsInZh
bHVlIjoiTHVVbUZlNS83MWw0WkU1TS85Wjkxdz09IiwibWFjIjoiODY3
YWE1ZjhmY2Q3NTI0OWZhZDFlOTBkMTA0NTNhYWM3ODlmMmRjN
mZiYjFlZDU3MTkzOGJkY2EwZDUzYWE0NCIsInRhZyI6IiJ9" class="text-
reset">
<span class="ml-2">
</span>
</a>
</li>
<a
story/details/eyJpdiI6InVPK2RFZUZrV2ZSQVA0T09oVmZvNWc9PSIsIn
ZhbHVlIjoiNnNwaWU5dUhJRVdKQi9MSmlvQkhqQT09IiwibWFjIjoiYzA
5ZmFlZTE3MzlhNGUxOGI5NjU5MmExOTg5YmY4ZWQ5YzE1MGQwYj
dhNzRjNzA1NGNjNTcxOWEzMmVkZDBlMCIsInRhZyI6IiJ9"
class="text-reset">
<span class="ml-2">
117
</span>
</a>
</li>
</ul>
</div>
<div class="text-center border-top">
<a href="https://accunityservices.com/wordpress/accohub/all-
notifications" class="text-reset d-block py-2">
View All Notifications
</a>
</div>
</div>
</li>
<li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
<a
href="https://accunityservices.com/wordpress/accohub/dashboard"
class="text-reset d-inline-block opacity-60 py-2">My Panel</a>
</li>
<a href="https://accunityservices.com/wordpress/accohub/logout"
class="text-reset d-inline-block opacity-60 py-2">Logout</a>
</li>
118
</ul>
</div>
</div>
</div>
</div>
<header class=" sticky-top z-1020 bg-white border-bottom shadow-

sm">
<div class="position-relative logo-bar-area z-1">
<div class="d-flex align-items-center">
<div class="col-auto col-xl-3 pl-0 pr-3 d-flex align-items-center">
<a class="d-block py-20px mr-3 ml-0"

href="https://accunityservices.com/wordpress/accohub">
<img
ds/all/E5tPTg2P460lm5RH2BPOT5IAGyDZmX8iaCxfBUQk.png" alt
class="mw-100 h-30px h-md-40px" height="40">
</a>
<div class="d-none d-xl-block align-self-stretch category-menu-icon-

box ml-auto mr-0">
<div class="h-100 d-flex align-items-center" id="category-menu-

icon">
119
<div class="dropdown-toggle navbar-light bg-light h-40px w-50px pl-
2 rounded border c-pointer">
<span class="navbar-toggler-icon"></span>
</div>
</div>
</div>
</div>
<div class="d-lg-none ml-auto mr-0">
<a class="p-2 d-block text-reset" href="javascript:void(0);" data-

toggle="class-toggle" data-target=".front-header-search">
<i class="las la-search la-flip-horizontal la-2x"></i>
</a>
</div>
<div class="flex-grow-1 front-header-search d-flex align-items-center

bg-white">
<div class="position-relative flex-grow-1">
<form
action="https://accunityservices.com/wordpress/accohub/search"
method="GET" class="stop-propagation">
<div class="d-flex position-relative align-items-center">
<div class="d-lg-none" data-toggle="class-toggle" data-

target=".front-header-search">
<button class="btn px-2" type="button"><i class="la la-2x la-long-

arrow-left"></i></button>
120
</div>
<div class="input-group">
<input type="text" class="border-0 border-lg form-control"

id="search" name="keyword" placeholder="I am shopping for..."
autocomplete="off">
<div class="input-group-append d-none d-lg-block">
<button class="btn btn-primary" type="submit">
<i class="la la-search la-flip-horizontal fs-18"></i>
</button>
</div>
</div>
</div>
</form>
<div class="typed-search-box stop-propagation document-click-d-

none d-none bg-white rounded shadow-lg position-absolute left-0
top-100 w-100" style="min-height: 200px">
<div class="search-preloader absolute-top-center">
<div class="dot-loader"><div></div><div></div><div></div></div>
</div>
<div class="search-nothing d-none p-3 text-center fs-16">
</div>
<div id="search-content" class="text-left">
121
</div>
</div>
</div>
</div>
<div class="d-none d-lg-none ml-3 mr-0">
<div class="nav-search-box">
<a href="#" class="nav-box-link">
<i class="la la-search la-flip-horizontal d-inline-block nav-box-

icon"></i>
</a>
</div>
</div>
<div class id="compare">
<a
href="https://accunityservices.com/wordpress/accohub/compare"
<i class="la la-refresh la-2x opacity-80"></i>

pill">0</span>

70">Compare</span>
122
</span>
</a> </div>
</div>
<div class id="wishlist">
<a
href="https://accunityservices.com/wordpress/accohub/wishlists"
<i class="la la-heart-o la-2x opacity-80"></i>

pill">0</span>

70">Wishlist</span>
</span>
</a>
</div>
</div>
<div class="d-none d-lg-block align-self-stretch ml-3 mr-0" data-

hover="dropdown">
<div class="nav-cart-box dropdown h-100" id="cart_items">
<a href="javascript:void(0)" class="d-flex align-items-center text-

reset h-100" data-toggle="dropdown" data-display="static">
123
<i class="la la-shopping-cart la-2x opacity-80"></i>
<span class="badge badge-primary badge-inline badge-pill cart-

count">0</span>

70">Cart</span>
</span>
</a>

menu-lg p-0 stop-propagation">
<div class="text-center p-3">
<i class="las la-frown la-3x opacity-60 mb-3"></i>
<h3 class="h6 fw-700">Your Cart is empty</h3>
function addToCart(){
$.ajax({
type:"POST",
url:
124
});
else{

options");
function buyNow(){
125
$.ajax({
type:"POST",
url:
if(data.status == 1){
window.location.replace("https://accunityservices.com/wordpress/a
ccohub/cart");
else{
126
});
else{

options");
</script>
function show_order_details(order_id)
$('#order-details-modal-body').html(null);
if(!$('#modal-size').hasClass('modal-lg')){
$('#modal-size').addClass('modal-lg');
127
}
$.post('https://accunityservices.com/wordpress/accohub/admin/ord
ers/details', { _token : AIZ.data.csrf, order_id : order_id},
function(data){
$('#order-details-modal-body').html(data);
$('#order_details').modal();
AIZ.plugins.bootstrapSelect('refresh');
});
</script>
</body>
</html>
128
CONCLUSION
The project entitled ACCOHUB - ONLINE DIGITAL PRODUCT

WEBSITE was completed successfully.
The system has been developed with much care and free of errors
and at the same time it is efficient and less time consuming. The
purpose of this project was to develop a web application and an
android application for purchasing items from a shop.
This project helped us in gaining valuable information and practical

knowledge on several topics like designing web pages using html &
css, usage of responsive templates, designing of android applications,
and management of database using mysql . The entire system is
secured. Also the project helped us understanding about the
development phases of a project and software development life
cycle. We learned how to test different features of a project.
This project has given us great satisfaction in having designed an

application which can be implemented to any nearby shops or
branded shops selling various kinds of products by simple
modifications.
There is a scope for further development in our project to a great

extend. A number of features can be added to this system in future
like providing moderator more control over products so that each
moderator can maintain their own products. Another feature we
wished to implement was providing classes for customers so that
different offers can be given to each class. System may keep track of
history of purchases of each customer and provide suggestions based
on their history. These features could have implemented unless the
time did not limited us.
129
REFERENCES
This document contains provisions which, through reference in this

text, cons•tute provisions of the present document.
2 Google Search Engine for various searching
3 Web-Technologies Black Book
4 Keeves PHP- MYSQL
5 Wrox Press – Beginning PHP5
6 Online at www.w3schools.org
7 Murach’s-PHP/MYSQL
130

ONLINE DIGITAL PRODUCT WEBSITE Yash Ambre

Uploaded by

Copyright:

Available Formats

ONLINE DIGITAL PRODUCT WEBSITE Yash Ambre

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ONLINE DIGITAL PRODUCT WEBSITE Yash Ambre

Uploaded by

Copyright:

Available Formats

ACCOHUB - ONLINE SHOPPING WEBSITE

Submitted in partial fulfillment of the

DIPLOMA IN COMPUTER ENGINEERING

Yash Subhash Ambre

Under the esteemed guidance of

DEPARTMENT OF COMPUTER ENGINEERING

BALASAHEB MHATRE POLYTECHNIC

BALASAHEB MHATRE POLYTECHNIC

This is to certify that Mr By Yash Subhash Ambre, Aman Ajij Sayyed,

Submitted to the MSBTE in partial fulfilment of the requirement for the

This project is a web based shopping system for an existing

This project is an attempt to provide the advantages of online

3.1 LOGIN TABLE

Online shopping is the process whereby consumers directly buy goods

1.1 PROJECT OBJECTIVE:

The objective of the project is to make an application in android

1.2 PROJECT OVER VIEW:

The central concept of the application is to allow the customer to

1.3 PROJECT SCOPE:

This system can be implemented to any shop in the locality or to

If shops are providing an online portal where their customers can

1.4 STUDY OF THE SYSTEM

The system after careful analysis has been identified to be presented

The administrator is the super user of this application. Only admin

This module is divided into different sub-modules.

MANAGE USER ADMIN MANAGE ORDER

Fig 1.1: Admin module

BLOCK MANAGE ADD

Fig 1.2: Manage Moderator

Only admin is having the privilege to add a moderator. A moderator

Admin can restrict a moderator from managing the orders by

Admin has privilege to delete a moderator who was added.

All existing moderators can be viewed by the administrator as a list.

Fig 1.3: Manage Products

The shopping cart project contains different kind of products. The

Administrator can delete the products based on the stock of that

DELETE USER MANAGE USER ADD USER

Fig 1.4: Manage User

Admin has privileges to add a user directly by providing the details.

8 Delete & Block Users

Administrator has a right to delete or block a user. The default status

DELETE ORDER MANAGE ORDER VIEW ORDER

Fig 1.5: Manage Orders

Administrator can view the Orders which is generated by the users.

Fig 1.6: Moderator Module

A moderator is considered as a staff who can manage orders for the

Fig 1.7: User Module

A new user will have to register in the system by providing essential

Users can search for a particular product in the list by name.

In the history the user will have a view of pending orders.

The user can view and edit the profile.

System analysis is the process of gathering and interpreting facts,

System analysis or study is an important phase of any system

2.1 EXISTING SYSTEM

1.1 PROPOSED SYSTEM

2.3.1 GENERAL DESCRIPTION

The system consists of two parts .A web application which can

As online shopping became a trend nowadays the regular shops are

2.3.2 SYSTEM OBJECTIVES