Sie sind auf Seite 1von 140

Chapter - 1

Introduction

1.1About the organization:

E-commerce is fast gaining ground as an accepted and used business paradigm. More and
more business houses are implementing web sites providing functionality for performing
commercial transactions over the web. It is reasonable to say that the process of shopping
on the web is becoming commonplace.

The objective of this project is to develop a general purpose e-commerce store where any
kind of product can be bought from the comfort of home through the Internet. However,
for implementation purposes, this paper will deal with an online shopping for baby
product

An online store is a virtual store on the Internet where customers can browse the catalog
and select products of interest. The selected items may be collected in a shopping cart. At
checkout time, the items in the shopping cart will be presented as an order. At that
time, more information will be needed to complete the transaction. Usually, the customer
will be asked to fill or select a billing address, a shipping address, a shipping option, and
payment information such as bKash, or Cash on Delivery. An e-mail notification is sent to
the customer as soon as the order is placed.

1.1.1 PROJECT DESCRIPTION

Any member can register and view available products.

Only registered member can purchase multiple products regardless of quantity. Contact
Us page is available to contact Admin for queries.

There are four roles available:

 Visitor
 User
 Operator
 Admin.

1
Visitor can view, search, compare available products.
User can view and purchase products.
Operator can excess add option and can view everything of admin panel.
 Operator can add product, edit product, update and remove product.
 Can access users some information.

An Admin has some extra privilege including all privilege of visitor and user.
 Admin can add products, edit product information and add/remove
product.
 Admin can add user, edit user information and can remove user.
 Admin can ship order to user based on order placed
by sending.

Services provided by InsigmaTechnology:


INSIGMA is a technology enabler and provides a one stop shop for all IT needs. Insigma
provides training, consulting, software and hardware development, and IT staffing services on
an as-needed basis. Our proven methodologies and experience with best practices ensure
rapid, successful development and deployment of your IT solutions across your enterprise.
Insigma successfully provides onsite, offsite and hybrid project teams to clients. The hybrid
delivery model combines onsite and offsite delivery for superior results at greatly reduced
costs. Typically, the discovery and planning stages of testing are executed onsite at the client’s
office. In this model, the Practice Manager attends all related meetings, conducts onsite
walkthroughs and is responsible for meeting client quality gate requirements, thus make the
offsite development and testing transparent to the onsite teams. The subsequent
documentation and execution phases are carried out offsite at our premises. The hybrid model
maximizes efficiency in resource allocation thereby reducing costs.

Insigma In Association With Ebest Presents Cooler Iot:


Cooler IoT is a true Internet of Things solution that utilizes groundbreaking technology to
convert existing coolers into Smart Coolers eliminating human intervention. This allows the
creation of an intelligent network of Smart Coolers that can be managed and monitored
remotely.

2
With Cooler IoT, Out of Stock situations and Purity issues are now a thing of the past. Smart
Coolers with Actionable Analytics enable organizations to increase overall sales and
efficiency.

Problems Solved With Cooler Iot:


 Is the cooler present at desired location? - Asset Tracking
 Is the cooler plugged in? Is the temperature appropriate? - Cooler Health
 Is the cooler sufficiently stocked? -Cooler Stock
 Is the cooler stocked according to desired product placement? - Compliance
 Is it "impure"? What is the level of impurity? - Cooler Purity
 How frequently and when is the cooler being used? Cooler Usage/ Consumer
Engagement Trends
 What shelves are selling? What products are selling by shelf? -Consumer
Engagement / Product Consumption Trends

1.1.2 VISION AND MISSION


Vision of the Organization
We shall define ourselves in the cutting edge technology in the coming era. We shall
create honest working environment with see-through-glass planning.

Mission of the Organization


From its inception, Insigma has been developing and delivering web based solutions.
One of our initial solutions was a Six Sigma based MIS Application for a manufacturer in
Germany. Since then we have delivered numerous small to large scale web applications. We
have a strong focus on delivering applications both on Microsoft, Java, and Open Source
platforms. Recently our focus has been on delivering Web 2.0 solutions using frameworks
such as Ext-JS, jQuery, and YUI integrated with either a .NET framework, Java or Open
Source, at server side.

We have been able to encapsulate our years of experience and lessons learned into a
proprietary business application development framework, Parallax. Parallax speeds up the
development and delivery for almost any desktop, web or mobile application. Over the last six
years we have various success stories and case studies to boost the advantages of Parallax.

3
1.1.3 Financial Structure
The financial Structure of an organization includes the stability of the assets and
liabilities of a company. There are so many factors that influence the financial structure of a
company like the payments that a company has to receive and the payment that the company
has to pay as the liabilities. Actually each and every project is designed in such a way that it
can influence the asset and liability side of the financial structure in unequal way i.e. it can
enhance the Asset side but it can reduce the liability side. So each project is designed while
keeping in mind the financial structure of the company.

1.2 Project/Problem Statement

Project Introduction
In today’s busy world, people don’t have time for their personal needs. And
thetechnology is so fast that anyone can do anything by just sitting in a room. The internet is
the way that helps a person in all aspects. If someone wish to buy and view things, he can buy
online with the help of internet.
Today there are very least organizations which are manual. Everything is going tobe
computerized and online whether it is banking, advertising or shopping. We are trying to help
people to make their life easier by proving online Electronic Items Shopping. In this we have
introduced many modules like admin module and customer module. The Customer Have to
register for any enquiry related to clothes. The unregistered person can’t access this
application. The registered customer can view details of clothes and he can buy of his choice
and need. He has to pay the price of cloth. The admin module contains the access of admin on
the application. The admin can change everything in the application. He has the ability to add,
delete, update any information regarding the clothes.
The project’s home page includes the registration link. The registered users canlogin to
their account for their queries or buy new clothes. And the unregistered users have first to
register. The registration can be done by following the sign up link.
Component of the project
 Login & Registration
 Certification
 Interview Questions
 Code Examples
4
 Tutorials
 PPT’s
 Online Test
 Forum
 Blog

How to Login:
In this module, the user will enter his username and password to view and buy latest products.
There will be 2 types of users Administrator/Customer
How to be a member of this application:
In this site, the candidate can join this application, if he is not a member yet by pressing sign
up link .User should provide some details that are asked to join.
How to view the mobile details:
Any cloth can be searched by selecting the model no. which the use wish to view or buy.
How to give order:
First the user has to login, and then he will visit the view products page. There he will select
the cloth he wants to buy and then he will click on show products detail .There he can
purchase that cloth.
How to pay money:
The user can pay cash on delivery.
Module Description:
In this area we are going to discuss the all modules and sub module of the application. The
description is as follows:

Login and Registration: This module is very familiar and plays important role for the
security in the project. As we know in all IT project the system always processes the user
request that the user is authorized or not. So the main functionality of this module is to
process the authorization and authentication of the user.
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

5
shopping from anywhere, the shops won’t 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.

1.4 INTRODUCTION TO VB 6.0

Visual Basic was designed to be easily learned and used by beginner programmers. The
language not only allows programmers to create simple GUIapplications, but can also develop
complex applications. Programming in VB is a combination of visually
arranging components or controls on a form, specifying attributes and actions of those
components, and writing additional lines of code for more functionality. Since default
attributes and actions are defined for the components, a simple program can be created
without the programmer having to write many lines of code. Performance problems were
experienced by earlier versions, but with faster computers and native code compilation this
has become less of an issue.

1.5 MS Access

Microsoft Access uses similar features to those found in other databases and some
other features that are unique. Most of these additional features are made possible by Access’s
tight integration with the Windows NT operating system. MS Access contains the data storage
options and the capability to store and process the same volume of data as a mainframe or a
mini computer.

MS Access is the latest Client/Server based RDBMS package from Microsoft. Its new
features provide a very high degree of performance making it comprehensive package for
database management. It is a largely used in medium-sized establishments.

1.6 STRUCTURE OF THE PROGRAM


Analysis:

Electronic Store management system becoming an essential to efficiently manage


inventories in computer age.

6
Electronic Shop Management System is a workable application for retail store
inventory and accounts management. It keeps a list STOCKS and products at a store and can
do operations on them. The most important operation is a "PURCHASE", all the transactions
and billing details and stock purchasing details involved on it.

Why We Want to Hold Inventories

 Improve customer service


 Reduce certain costs such as
 Ordering costs
 Stock out costs
 Acquisition costs
 Start-up quality costs
 Contribute to the efficient and effective operation of the production system

1.7 INTRODUCTION

The software project is initiated by the client needs. In the beginning, these needs are
in the minds of various people in the client organization. The requirement analyst has to
identify the requirements by talking to these people and understanding their needs. For such
systems, the requirements problem is complicated by the fact that the needs and requirements
of the system many not to be known even to the user-they have to be visualized and created.
Hence, identifying requirements necessarily involves specifying what some people have in
their minds. When inputs from multiple people are to be gathered, as is often the case, these
inputs are likely to be inconsistent as well.

1.8 Purpose:

This project is aimed at providing an economically feasible security and


communication system that will provide very good features that can fulfill the security needs
of a small organization. The project will be supposed to implement the storage of products so
that a large collection could be maintained with minimum storage space. This project will also
be able to provide reports of products sold to the customer and brought to the store.

7
1.9 Scope:

The project could be implemented in an average sized organization. An average


company will not be very keen on spending loads of money on ledgers. Where as our project
will greatly reduce the costs which is using common and cheap office items like database and
desktop application. And also there is no requirement to store books or accounts. The data is
directly stored in the database in the hard disk of the PC.

1.10 Definitions, Acronyms, Abbreviations

This program is a menu driven program. When we click the main menu the different
forms will be enabled. The program consists of the following modules:

 Source listing
This module is suppose to identify the products by their discription.

 Add products
This module is suppose to take the inputs from an input device.

 Add customers
This module is capable of adding customers in the specified formats.

 Update and delete products


This module will update and delete products.

 Update and delete customers


This module will be able to update and delete customers

 Searching
In this module the admin or emplyee can search the customer or products from
the database based on criterias

 Transactions
This module will take up transactions like selling products, buying products
from supplier updating cash and updating the bills.Appropriate actions will be
taken.
8
 Report Generation
This is a client program which will request for reports.

1.11 References

 The needed requirements for this project has been obtained from the stock by
observing manual records and also gathered some of the information by asking
questions.
 Vb 6.0

1.1 2Overview

Electronic Shop is a process of storing the products which is capable of maintaining


storage of large amount of products. The primary purpose of this application is to implement
the above stated functionality. The application should be capable enough to store the products
and also perform some updating on the products that is stored. It will be having user friendly
GUIs that will guide the user to easily achieve the same. The application shall also have some
features like reports displaying in the same window. In addition to this the application also
supports feature to search products. It can also search products based on criteria so that the
employees will be able to view the same. The application is to be fully developed under vb
platform using Visual Basic 6.0

2 OVERALL DESCRIPTION

2..1 Product Perspective

The product will be developed completely independent and standalone. Each user will
have to have an individual copy of the product.

2.2 Product Functions

The product functions will include the following areas:

9
The application is capable enough to store different products and also perform some
editng on them that is added.It will be having user friendly GUI’s that will guide the user to
easily achive the same.

 AdminForm
 User Form
 Adding users
 Adding products
 Updating users
 Updating products
 Searching users and products
 Report generations

2.3 User Characteristics

The user of this product is supposed to be fairly educated about the usage of the
computers. He should understand how to store products and he should have knowledge about
various products so that they could be saved. A person who has no knowledge of computers
will find it difficult to understand the system. But with a little knowledge it will be very easy
to handle the project.

2.4 General Constraints

Designed to run on Windows 98 and further versions.

2.5 Assumption and Dependencies

Assumptions:

 The code should be free with compilation errors/syntax errors.


 The product must have an interface which is simple enough to understand.

Dependencies:

 All necessary hardware and software are available for implementing and use of the
10
tool.
 The proposed system would be designed, developed and implemented based on the
software requirements specifications document.
 End users should have basic knowledge of computer and we also assure that the users
will be given software training documentation and reference material.

2.3 SPECIFIC REQUIREMENTS

2.3.1 Functional Requirements

i. The application should be able to handle all the tasks in an efficient manner.
ii. The application should be able to provide up-to-date information.

iii. The application should be able to handle all the changes made.

2.3.2 External Interface Requirements

2.3.2.1 User Interfaces

The user interface is designed in Visual Basic.Net. The developer will have to study
the designing of the product. The use of the controls and the component from the Add items
feature of the Vb 6.0. The user of the product will get very user friendly forms which will be
very easy to work with.

2.3.3 Performance Requirements

The system is supposed to be having good memory space and a Bigger Ram above
256 MB preferably. The sound card and graphics card will have to be of good quality and
capacity.

2.3.4 Design Constraints

Software Constraints:

Operating system Windows XP, 2003


11
Microsoft Visual Basic 6.0

MS Access

Hardware constraints:

Computer: INTEL compatible

256 MB RAM or higher

Pentium III

A CD Writer / Reader

A Color Monitor

2.3.5 Other Requirements

None

3.1 INTRODUCTION
The purpose of the Design Phase is to a solution of the problem specified in
the requirements document. This is the first step in moving from the problem domain to the
solution domain. The design of a system is perhaps the most critical factor affecting the
quality of the software; it has a major impact on the later phases is the Design Document.
This Document is similar to a blueprint or a plan for the solution and is used later during
implementation, testing and maintenance.

The Design activity is often divided into separate phases – System Design and
Detailed Design. System Design is sometimes also called Top-Level Design. This system
design aims to identify and modules that should be in the system, the specifications of these
modules, and how they interact with each other to produce the desired result. At the end of the
System Design all the major data structures, file formats, and the major modules in the system
and their specifications are decided.

12
3.2 APPLICABLE DOCUMENTS

The document used for preparing system design is software requirement specification
(SRS) for Inventory Management System.

3.3 FUNCTIONAL DECOMPOSITION

The main functional component of Inventory Management System is:

i) Admin

3.4 DESCRIPTION OF PROGRAMS

3.4.1 Context Flow Diagram (CFD)

A Context Flow Diagram is a top level (also known as level 0) data flow diagram. It
only contains one process node (process 0) that generalizes the function of the entire system
in relationship to external entities. In context diagram the entire system is treated as a single
process and all its inputs, outputs, sinks and sources are identified and shown.

NOTATIONS USED IN FLOW DIAGRAM:

Bubble  The Bubble represents a process or transformation that is applied to the data which
changes in some way. Each bubble is assigned a number.

Box  The Box is called an entity which represents a producer or a customer of the
Information

Arrow  The Arrow represents the data flow. All arrows in the data flow diagram are
labeled. The arrowhead indicates the direction of data flow.

Parallel Lines  Represents a repository of data that is to be stored for use by one or more
processes.

13
CHAPTER- 2
MODULES

My Modules:
 Administrator
 Moderators
 Users
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.

1. Login Activity
2. Registration Activity Diagram
3. Admin activity Diagram
4. User Activity Diagram

LoginActivity:

14
RegistrationActivityDiagram:

AdminActivityDiagram:
15
 Add Products
The shopping cart project contains different kind of products. The products can be
classified into different categories by name. Admin can add new products into the
existing system with all its details including an image.

 Delete Products
Administrator can delete the products based on the stock of that particular product.

 Search products
Admin will have a list view of all the existing products. He can also search for a
particular product by name.

UserActivityDiagram:
16
 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.

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

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

17
 View Order:
Administrator can view the Orders which is generated by the users. He can verify the
details of the purchase.
 Delete order:
Admin can delete order from the orders list when the product is taken for delivery.

MODERATORS:

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.

 Manage products
 Manage Users
 Manage orders

CFD OF INVENTORY MANAGEMENT SYSTEM:

18
Administrator/User Customer Information/
Products

Report

Login

Update
Customer /
Products / User

Electronic

Shop Mgt
System

Customer /
Product /
Transaction
Update

Purchase / Report Generation


Activities Transaction

3.4.2 Data Flow Diagram (DFD):

19
A Data Flow Diagram (DFD) is a graphical representation of the "flow" of data
through an Information System. A data flow diagram can also be used for the visualization of
Data Processing. It is common practice for a designer to draw a context-level DFD first which
shows the interaction between the system and outside entities. This context-level DFD is then
"exploded" to show more detail of the system being modeled.

A DFD represents flow of data through a system. Data flow diagrams are commonly
used during problem analysis. It views a system as a function that transforms the input into
desired output. A DFD shows movement of data through the different transformations or
processes in the system.

Dataflow diagrams can be used to provide the end user with a physical idea of where
the data they input ultimately has an effect upon the structure of the whole system from order
to dispatch to restock how any system is developed can be determined through a dataflow
diagram. The appropriate register saved in database and maintained by appropriate authorities.

Data Flow Diagram Notation

Function

File/Database

Input/output

Flow

Data Flow Diagram of the Inventory Management

20
Level 0:

Input Output
Data Base
Admin/User System

Level 1:

Admin/User

Not Valid Login

Valid

Main Screen

Level 2:

21
Logged in
Admin/
Storekeeper
User

New
customr/prodcts
details DB

Customer
details

Sell to
Transactions customer/take
Of products from supplier

List of
Transactions
DB
And customers

A B

A B
22
Search
products
and
DB
customers

DB
Reports

Display

Logout

Level 3:

23
Login Admin

Add/View/ Update
Delete the Items DB

Reporting

Pending

Report
Paid

Report

4.1 ER DIAGRAM

24
BuyAmt

PayAmt
Price

Purchase
ProductDesc date

Name

Item Transaction
Code

1
Purchas
e
1

Customer

Confirm Has
Purchase Detail
s

25
CID Add
N
Name
Has Product
Detail
s
N

Sino Bill Details

IName
PId
Unit
Price
UPrice Total
Quantity Price

Quantity
Amoun
t

Users:

Area State

26
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.

Login:
A user must login with his user name and password to the system after registration.

View Products:

User can view the list of products based on their names after successful login. A detailed
description of a particular product with product name, products details, product image, price
can be viewed by users.

27
Search Product:
Users can search for a particular product in the list by name.

Add to cart:
The user can add the desired product into his cart by clicking add to cart option on the
product.
28
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.

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.

29
History:

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

Edit Profile:
The user can view and edit the profile.

30
Software and Hardware Requirements:
User Hardware Requirements:

 512 Ram
 1 GB Hard Disk Drive
 P4 Processor

User Software Requirements:

 Operating system
 Internet Connection
 Web Browser

Programmer software Requirements:

 PHP
 My SQL
 Apache Tomcat
 HTML
 CSS
 Java Script
 Bootsrap

CHAPTER- 3
SYSTEM ANALYSIS

31
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.
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.

EXISTING SYSTEM:

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 distant users.

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.

GENERAL DESCRIPTION

Product Description:

32
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.

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.

SYSTEM REQUIREMENTS:

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:

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.

33
Functional Requirements:

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:

 Username and password will be provided after user registration is confirmed.


 Password should be hidden from others while typing it in the field.

 REGISTER NEW USER:

Description of feature:

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.

Functional requirement:
 System must be able to verify and validate information.
 The system must encrypt the password of the customer to provide security.

 PURCHASING AN ITEM:

Description of feature:

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.

Functional requirement:
System must ensure that, only a registered customer can purchase items.

Admin:
Login:
34
The administrator can login

Add Products:
The administrator can add product, delete product and view product.

Catogries Order
The administrator can view orders and delete orders.

35
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.

Functional requirement

 The system must identify the login of a moderator.

CHAPTER- 4

36
INTRODUCTION OF TOOLS

FRONT-END/BACK-END
Front-End:
Web Pages using, PHP, HTML, and JavaScript.
Back-End:
MYSQL

Front End:
HTML:
It is used to generate web page. HTML, An initialise of Hypertext Markup Language, is the
predominant markup language for web pages. It provides a means to describe the structure of
text-based information in a document — by denoting certain text as headings, paragraphs,
lists, and so on.
HTML consists of a series of short codes typed into a text-file by the site author — these are
the tags. The text is then saved as a html file, and viewed through a browser, like Internet
Explorer or Netscape Navigator. This browser reads the file and translates the text into a
visible form, hopefully rendering the page as the author had intended. Writing your own
HTML entails using tags correctly to create your vision. You can use anything from a
rudimentary text-editor to a powerful graphical editor to create HTML pages.
The tags are what separate normal text from HTML code. You might know them as the words
between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff,
just by telling your browser what to render on the page. Different tags will perform different
functions. The tags themselves don’t appear when you view your page through a browser, but
their effects do. The simplest tags do nothing more than apply formatting to some text, like
this: <b> These words will be bold</b>, and these will not.
However, using HTML and designing good websites is a different story, which is why I try to
do more than just teach you code here at HTML Source — I like to add in as much advice as
possible too. Good website design is half skill and half talent, I reckon. Learning techniques
and correct use of your tag knowledge will improve your work immensely, and a good
understanding of general design and the audience you’re trying to reach will improve your
website’s chances of success. Luckily, these things can be researched and understood, as long
as you’re willing to work at it so you can output better websites.

37
JAVASCRIPT:
It is used for checking User information before sending to JavaScript is a scripting language
most often used for client-side web development. It is a dynamic, weakly typed, prototype-
based language with first-class functions. Currently, "JavaScript" is an implementation of the
ECMA Script standard.
javaScript is a cross-platform, object-oriented scripting language used to make web pages
interactive (e.x. Having complex animations, clickable buttons, popup menus, etc.). There are
also more advanced server side versions of javascript such as Node.Js which allow you to add
more functionality to a website than simply downloading files (such as real time collaboration
between multiple computers). Inside a host environment (for example, a web browser),
JavaScript can be connected to the objects of its environment to provide programmatic control
over them.
JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set
of language elements such as operators, control structures, and statements. Core JavaScript
can be extended for a variety of purposes by supplementing it with additional objects; for
example:

Client-side- JavaScript extends the core language by supplying objects to control a browser
and it’s Document Object Model (DOM). For example, client-side extensions allow an
application to place elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation.
Server-side - JavaScript extends the core language by supplying objects relevant to running
JavaScript on a server. For example, server-side extensions allow an application to
communicate with a database, provide continuity of information from one invocation to
another of the application, or perform file manipulations on a server.

PHP:
Php is a technology that lets you mix regular, static HTML with dynamically-generated,
HTML. Many Web pages that are built by CGI programs are mostly static, with the dynamic
part limited to a few small locations. But most CGI variations, including servlets, make you
generate the entire page via your program, even though most of it is always the same.
PHP can be integrated with the number of popular databases, including MySQL, PostgreSQL,
Oracle, Sybase, Informix, and Microsoft SQL Server.

38
PHP can be embedded within a normal HTML web pages. That means inside your HTML
documents you'll have PHP statements.

Back-End:

MySQL:
MYSql is the world’s most popular open source database software, with over 100 millions
copies of its software download or distributed throughout the world throughout its history.
With its superior speed , reliability and ease of use, MYSql has become the preferred choice
for web and forward thinking corporate It Managers because it eliminates the major problems
associated with down time, maintenance and administration for modern online application, it
is second most widely used open source relational database management system(RDBMS).

 MYSql is a database system used on the web.

 MYSql is a database system that runs on database server.

 MYSql is ideal for both small and large applications.

 MYSql is very fast and reliable and easy to use.

CHAPTER- 5
SYSTEM DESIGN
39
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.
 Logical Design
 Physical Design

During logical design phase the analyst describes inputs (sources), outputs (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.

INPUT AND OUTPUT DESIGN

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 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 friend and
easy to use. The design is done such that users get appropriate messages when exceptions
occur.

OUTPUT DESIGN:

Computer output is the most important and direct source of information to the user. Output
40
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.
Objectives of Output Design
The objectives of input design are −

To develop output design that serves the intended purpose and eliminates the production of
unwanted output.
 To develop the output design that meets the end users requirements.
 To deliver the appropriate quantity of output.
 To form the output in appropriate format and direct it to the right person.
 To make the output available on time for making good decisions.
Let us now go through various types of outputs –

External Outputs
Manufacturers create and design external outputs for printers. External outputs enable the
system to leave the trigger actions on the part of their recipients or confirm actions to their
recipients.
Some of the external outputs are designed as turnaround outputs, which are implemented as a
form and re-enter the system as an input.

Internal outputs
Internal outputs are present inside the system, and used by end-users and managers. They
support the management in decision making and reporting.

There are three types of reports produced by management information −

Detailed Reports − They contain present information which has almost no filtering or
restriction generated to assist management planning and control.
Summary Reports − They contain trends and potential problems which are categorized and
summarized that are generated for managers who do not want details.

Exception Reports − They contain exceptions, filtered data to some condition or standard
before presenting it to the manager, as information.
41
Output Integrity Controls
Output integrity controls include routing codes to identify the receiving system, and
verification messages to confirm successful receipt of messages that are handled by network
protocol.

E-R DIAGRAMS
User LOGIN:

USER DETAILS:

PRODUCT DETAILS:

42
PRODUCT ORDERS:

COMPLETE DIAGRAM:

43
DATA FLOW DIAGRAM:

A Data Flow Diagram (DFD) is a structured analysis and designtool that can be used for
flowcharting. A DFD is a network thatdescribes the flow of data and the processes that
change ortransform the data throughout a system. This network is constructed byusing a se of
44
symbols that do not imply any physicalimplementation. It has the purpose of clarifyingsystem
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 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:

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

LOGIN DFD:

45
REGISTRATION DFD:

46
ADMIN DFD:

47
48
MODERATOR DFD:

49
DATABASE DESIGN

The date design transforms the information domain model created during analysis into the
data structure that will be required into the implement software.

The assumption on which HIPO is based i.e. it is easy to loss track of the intended function of
a system or component in a large system. This is one reason why it is difficult to compare
existing systems against their original specification.

From the users view, single functions can be often extending across several modules. The
concern of the analyst then it is under standing, describing and documenting the modules and
their interaction in a way that provides sufficient details but that does not lose sight of the
large picture

NORMALIZATION

Normalization is the process of simplifying the relation ship between data elements in a
record. Though this technique, the collection of data in a record structure is replaced by
successive record structures that are simpler and more predictable and therefore more
manageable.

OR

Normalization is the formal approach, which examines data and group data item together in a
form i.e. better able to accommodate feature change and to minimize the impact of that
change on that application. It is mainly caused to reduce the redundancy of data items and
also for increasing the speed of database manipulation.

KEYS

PRIMARY KEY
50
A primary key is some or more column(s) in a table used to uniquely identify each row in the
table. A primary key column in a table has special attributes.

• It defines the column, as a mandatory column i.e. the column cannot be left blank. The not
null attribute is active.

• The data held across the column must be unique.

Syntax:

Column name data type (size) primary key.

FOREIGN KEY

Foreign key represents relationship between tables. A foreign key is a column (or a group of
columns) whose values are derived from the primary key or unique key of some other table.

The table in which the foreign key is defined is called a foreign table or detail table. The table
that defines the primary key in the master table.

Syntax:

Column name data type (size) references table name [(column name)]

Normalization Is Carried For Following Reasons:

• To the structure the data so that any pertinent relationship between entities can be
represented.

• To permit simple retrieval of data in response to query and report request.

• To simplify the maintenance of the data through updates, insertion and deletions.

• To reduce the need to the restructure or reorganize data when new application requirements
arise.

• This attempt to remove redundant data, avoid data inconsistencies and prevent up data
anomalies.

51
• This results in a simpler or more natural data model. A normalized database more clearly
reflects the natural entities and relationships in the real world.

Relational database theory outline five normal forms, of which there normal forms are used
popularly for designing relational tables.

THE RULES AND METHODS OF FIRST THREE NORMAL FORMS ARE GIVEN
BELOW.

FIRST NORMAL FORM

A relation is a first normal form if the intersection of any column and row contain only one
value (no repeating groups).

METHODS

Identify suitable primary key from a pool of un-normalized data.

Remove any that repeats with in a single value of this key to another relation bringing within
the primary key to form part of a new composite key in the new relation.

SECOND NORMAL FORM

A table in first normal form is also in second normal form. If the values in every columns are
functionally dependent on the complete primary key.

METHODS

For every relation with in a single data item making up the primary key, this rule should
always be true. For those with compound key examine every column and determines whether
its value depends on the whole of the compound key or just some of the part of it. Remove
those that depend only on part of the key to a new relation with that part as the primary key.

THIRD NORMAL FORM

52
Column are not transitively dependent on the primary relation in second normal form is also
in third normal form with the values in every non-key.

METHODS

Examine every non-key column and question its relationship with every other non-key
column. If for a value for column A there is only one value for column B, remove both
columns to a separate relation and mark the question unique as a primary key.

As database tables involved here needs normalization techniques so that it should be flexible
to access and store the values in it. So that third normal form is applied and all the tables are
normalized according to that.

DATABASE TABLE:

Address Table:

Pincode:

53
ORDER:

Category:

54
PINCODE:

AREAS:

55
Product:

CATOGRIES:

56
INVOICE:

ORDER:

57
CATOGORIES Description:

USER:

58
USER NOTIFIED

Customer Activity:

59
Customer History:

Customer Transaction:

60
Customer Wish list:

Information Description:

61
Location:

Manufacture:

62
Marketing:

Module:

63
Order:

Order History:

64
Order Option:

Order Product:

65
Order Total:

Return:

66
Return History:

Stoke Status:

67
User:

User Group:

68
Voucher:

CHAPTER- 6
CODING

69
Index.php:
f (defined('STDIN')) {
chdir(dirname(__FILE__));
}

if (($_temp = realpath($system_path)) !== FALSE) {


$system_path = $_temp . '/';
} else {
// Ensure there's a trailing slash
$system_path = rtrim($system_path, '/') . '/';
}

// Is the system path correct?


if (!is_dir($system_path)) {
header('HTTP/1.1 503 Service Unavailable.', TRUE, 503);
echo 'Your system folder path does not appear to be set correctly. Please open the following
file and correct this: ' . pathinfo(__FILE__, PATHINFO_BASENAME);
exit(3); // EXIT_CONFIG

LOGIN PAGE
<div class="container">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12 col-xs-offset-0"
style="background: #fff; margin-top: 100px; margin-bottom: 80px; padding-bottom: 15px;
box-shadow: 0 10px 15px -5px #000; ">
<h2>Login</h2>
<hr>
<form class="smooth-submit" id="login-form" action="user/login/login"
method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="username" type="text" class="form-control"
id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>

<!-- <a href="--><?//= $login_with_google ?><!--">Login with Google</a> | -->


<a href="user/password/forgot.html" class="load-page" class='pull-left' >Forgot
Password</a>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</form>
</div>
</div>
<script>
HOME:
70
<div class="container-fluid" style="overflow: auto;">
<!-- Top Row -->
<div class="row">
<!-- slider -->
<script>
$('.owl-carousel').ready(function () {
var home_page_slider = $("#home-page-slider");
home_page_slider.owlCarousel({
items: 1,
loop: true,
lazyLoad: true,
navigation: false,
autoPlay: 5000,
stopOnHover: true
});
});
</script>
<div id="demo">
<div id="home-page-slider" class="owl-carousel">
<?php foreach (call_user_func($main_slider) as $url): ?>
<div class="item"><img src="<?= $url ?>" class="img" style="width: 100%;
height: 100%;" ></div>
<?php endforeach; ?>
</div>
</div>
<!--<div style="height:200px" id="map"></div>-->
<div class="clearfix"></div>
<!-- //Slider -->

<!-- product category slider -->


<?php
foreach ($sliders as $key => $slider) {
echo $slider;
}
?>
<!-- //product category slider -->
<div class="clearfix"></div>
</div>
<!-- //Top row -->
<br>
</div>
<script>
$("img.lazy").lazyload({
effect: "fadeIn"
});
</script>

DATABASE.php:

<?php
71
defined('BASEPATH') OR exit('No direct script access allowed');

/*
| -------------------------------------------------------------------
| DATABASE CONNECTIVITY SETTINGS
| -------------------------------------------------------------------
| This file will contain the settings needed to access your database.
|
| For complete instructions please consult the 'Database Connection'
| page of the User Guide.
|
| -------------------------------------------------------------------
| EXPLANATION OF VARIABLES
| -------------------------------------------------------------------
|
| ['dsn'] The full DSN string describe a connection to the database.
| ['hostname'] The hostname of your database server.
| ['username'] The username used to connect to the database
| ['password'] The password used to connect to the database
| ['database'] The name of the database you want to connect to
| ['dbdriver'] The database driver. e.g.: mysqli.
| Currently supported:
| cubrid, ibase, mssql, mysql, mysqli, oci8,
| odbc, pdo, postgre, sqlite, sqlite3, sqlsrv
| ['dbprefix'] You can add an optional prefix, which will be added
| to the table name when using the Query Builder class
| ['pconnect'] TRUE/FALSE - Whether to use a persistent connection
| ['db_debug'] TRUE/FALSE - Whether database errors should be displayed.
| ['cache_on'] TRUE/FALSE - Enables/disables query caching
| ['cachedir'] The path to the folder where cache files should be stored
| ['char_set'] The character set used in communicating with the database
| ['dbcollat'] The character collation used in communicating with the database
| NOTE: For MySQL and MySQLi databases, this setting is only
used
| as a backup if your server is running PHP < 5.2.3 or MySQL <
5.0.7
| (and in table creation queries made with DB Forge).
| There is an incompatibility in PHP with
mysql_real_escape_string() which
| can make your site vulnerable to SQL injection if you are using
a
| multi-byte character set and are running versions lower than
these.
| Sites using Latin-1 or UTF-8 database character set and
collation are unaffected.
| ['swap_pre'] A default table prefix that should be swapped with the dbprefix
| ['encrypt'] Whether or not to use an encrypted connection.
|
| 'mysql' (deprecated), 'sqlsrv' and 'pdo/sqlsrv' drivers accept
TRUE/FALSE

72
| 'mysqli' and 'pdo/mysql' drivers accept an array with the following
options:
|
| 'ssl_key' - Path to the private key file
| 'ssl_cert' - Path to the public key certificate file
| 'ssl_ca' - Path to the certificate authority file
| 'ssl_capath' - Path to a directory containing trusted CA
certificats in PEM format
| 'ssl_cipher' - List of *allowed* ciphers to be used for the
encryption, separated by colons (':')
| 'ssl_verify' - TRUE/FALSE; Whether verify the server
certificate or not ('mysqli' only)
|
| ['compress'] Whether or not to use client compression (MySQL only)
| ['stricton'] TRUE/FALSE - forces 'Strict Mode' connections
| - good for ensuring strict SQL while
developing
| ['ssl_options'] Used to set various SSL options that can be used when making SSL
connections.
| ['failover'] array - A array with 0 or more data for connections if the main should fail.
| ['save_queries'] TRUE/FALSE - Whether to "save" all executed queries.
| NOTE: Disabling this will also effectively disable both
| $this->db->last_query() and profiling of DB queries.
| When you run a query, with this setting set to TRUE (default),
| CodeIgniter will store the SQL statement for debugging
purposes.
| However, this may cause high memory usage, especially if you
run
| a lot of SQL queries ... disable this to avoid that problem.
|
| The $active_group variable lets you choose which connection group to
| make active. By default there is only one group (the 'default' group).
|
| The $query_builder variables lets you determine whether or not to load
| the query builder class.
*/
$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => 'leftright1379',
'database' => 'sakhibazaar',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => FALSE,
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
73
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

singup

<div class="container">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-
offset-0" style="background: #fff; margin-top: 50px; margin-bottom: 30px; padding-
bottom: 15px; box-shadow: 0 10px 15px -5px #000; ">
<h2>Register</h2>
<hr>
<form id="signup-form" class="smooth-submit"
action="user/signup/register.html" method="POST">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>First Name*</label>
<input type="text" class="form-control" placeholder="First Name"
name="fname">
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label>Last Name*</label>
<input type="text" class="form-control" placeholder="Last Name"
name="lname">
</div>
</div>
</div>

<div class="form-group">
<label>Mobile*</label>
<input type="text" class="form-control" placeholder="Mobile"
name="mobile">
</div>

<div class="form-group">
<label>Email* (Used as username)</label>
<input type="email" class="form-control" placeholder="E-Mail"
name="email">
</div>

<div class="row">
74
<div class="col-sm-6">
<div class="form-group">
<label>New Password*</label>
<input type="password" class="form-control" placeholder="New
Password" name="password">
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label>Confirm Password*</label>
<input type="password" class="form-control" placeholder="Confirm
Password" name="c_password">
</div>
</div>
</div>

<div class="form-group">
<label>Address*</label>
<textarea class="form-control" placeholder="Address"
name="add"></textarea>
</div>

<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>City*</label>
<input type="text" class="form-control" placeholder="City"
value='Agra' readonly="" name="city">
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label>Pin Code*</label>
<?= form_dropdown('pin_code', get_options_array(get_pincodes()),
$user->user_zip, ['class' => 'form-control']) ?>
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label>Area</label>
<?= form_dropdown('area', get_options_array(get_areas(), 'Select
Area'), '', ['class' => 'form-control']) ?>
</div>
</div>
</div>

<button type="submit" class="btn btn-primary pull-right">Submit</button>


</form>
75
</div>
</div>
<script>
$(document).on('aftersubmit', 'form#signup-form', function (e, data) {
malert(data.messege, data);
if (data.location) {
change_page(data.location);
}
});
</script>
Wishlist-view.php:

<div class="cart-view" style="z-index: 999999;">


<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"><i class="fa fa-close text-danger"></i></button>
<h3 class="modal-title text-danger" id="myModalLabel">My Wishlist</h3>
<script> $('[data-toggle="tooltip"]').tooltip();</script>
</div>
<div class="modal-body">
<?php if (count($items) > 0): ?>
<table class="table table-striped">
<thead class="hidden-xs hidden-sm">
<tr>
<td>
<div class="row ">
<div class="col-md-1"></div>

<div class="col-md-4">Product Name</div>

<div class="col-md-2 text-right">Price</div>

<div class="col-md-2 text-center">Stock Status</div>

<div class="col-md-2 text-right"></div>


<div class="col-md-1"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<?php foreach ($items as $key => $item): ?>
<tr>
<td>
<div class="row">
<div class="col-md-1 col-md-offset-0 col-sm-2 col-sm-offset-0
col-xs-4 col-xs-offset-4 ">
<img src="<?= $item->cover_url ?>" class="img-
responsive">
</div>
76
<div class="col-md-1 pull-right hidden-lg hidden-md hidden-
sm"><a class="smooth-submit wishlist-remove-item-btn"
href="user/wishlist/remove.html?id=<?= $item->product_id ?>" p-id="<?= $item-
>product_id ?>"><i class="fa fa-close text-primary" data-toggle="tooltip" data-
placement="left" title="Remove Item"></i></a></div>
<div class="hidden-lg hidden-md hidden-sm"><div
class="clearfix"></div></div>

<div class="col-md-4 col-sm-10 cart-product-name"


style="line-height:43px;"><?= $item->name ?></div>

<div class="col-md-2 col-sm-3 cart-price-1" style="line-


height:43px;"><?= $item->sale_price ?></div>

<div class="col-md-2 col-sm-3 text-center" style="line-


height:43px;">
<?= $item->get_stock("In stock", "Out of Stock") ?>
</div>
<div class="col-md-2 col-sm-3 cart-price-2" id="wishlist-cart-
action-<?= $item->product_id ?>" style="line-height:43px;">
<?php if ($row = in_cart($item->product_id)): ?>
<a p-id="<?= $item->product_id ?>" href="my-
cart/update-qty.html?rowid=<?= $row['rowid'] ?>&qty=0" class='btn btn-sm btn-
danger smooth-submit add-to-cart-btn'><i class="fa fa-cart-arrow-
down"></i>&nbsp;&nbsp;Remove</a>
<?php else: ?>
<a p-id="<?= $item->product_id ?>" href="my-
cart/add.html?id=<?= $item->product_id ?>&sku=<?= $item->sku ?>" class='btn btn-
sm btn-danger smooth-submit add-to-cart-btn'><i class="fa fa-cart-
plus"></i>&nbsp;&nbsp;Add to Cart</a>
<?php endif; ?>
</div>
<div class="col-md-1 col-sm-1 hidden-xs"><a class="smooth-
submit wishlist-remove-item-btn" href="user/wishlist/remove.html?id=<?= $item-
>product_id ?>" p-id="<?= $item->product_id ?>"><i class="fa fa-close pull-right
text-primary" data-toggle="tooltip" data-placement="top" title="Remove
Item"></i></a></div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else: ?>
<h3 class="text-center" >No Items in wishlist</h3>
<?php endif; ?>
</div>

</div>

Forgotten.php:
77
<div class="modal fade" id="forget" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
class="fa fa-close text-danger"></i></button>
<h3 class="modal-title text-danger" id="myModalLabel">Forget Password</h3>
</div>
<div class="modal-body">
<div class="form-group label-floating has-error">
<label class="control-label">Email</label>
<input class="form-control">
</div>
<input type="submit" class="btn btn-danger pull-right" value="Forget Password" >
</div>
<div class="modal-footer">

</div>
</div>
</div>
</div>

Login.php:

<div class="container">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12 col-xs-
offset-0" style="background: #fff; margin-top: 100px; margin-bottom: 80px; padding-
bottom: 15px; box-shadow: 0 10px 15px -5px #000; ">
<h2>Login</h2>
<hr>
<form class="smooth-submit" id="login-form" action="user/login/login"
method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="username" type="text" class="form-control"
id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>

<a href="<?= $login_with_google ?>">Login with Google</a> |


<a href="user/password/forgot.html" class="load-page" class='pull-left'
>Forgot Password</a>
<button type="submit" class="btn btn-primary pull-right">Submit</button>

78
</form>
</div>
</div>
<script>

$('form#login-form').on('aftersubmit', function (e, data) {


malert(data.messege, data);
if (data.location) {
change_page(data.location, true);
}
});

</script> }
}

Order.php:

<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Your Orders</h2>
</div>
<div class="clearfix"></div>
<hr>
<div class="clearfix"></div>
</div>

<div class="row hidden">


<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Order No.</label>
<input type="text" class="form-control" placeholder="Order No.">
</div>
</div>

<div class="col-md-3 col-sm-6">


<div class="form-group">
<label>Status</label>
<select class="form-control">
<option>Packed</option>
79
<option>Completed</option>
<option>Shipping</option>
<option>Canceled</option>
</select>
</div>
</div>

<div class="col-md-3 col-sm-6">


<div class="form-group">
<label>Date From</label>
<input type="date" class="form-control">
</div>
</div>

<div class="col-md-3 col-sm-6">


<div class="form-group">
<label>Date To</label>
<input type="date" class="form-control">
</div>
</div>
<div class="clearfix"></div>
</div>

<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table" id="orders-table">
<thead>
<tr>
<th data-field="sn">Sr</th>
<th data-field="name">Customer Name</th>
<th data-field="order_no">Order No.</th>
<th data-field="date">Order Date & Time</th>
<th data-field="price">Total Price</th>
<th data-field="qty">Items</th>
<th data-field="actions">View</th>
80
<th data-field="status">Order Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
$('#orders-table').bootstrapTable({
url: "user/orders/rows.html",
sidePagination: 'server',
pagination: true,
search:true,
showRefresh:true,
// mobileResponsive: true,
// showColumns: true,
// checkOnInit: true,
// queryParams: function (p) {
// p.from = $('[name=from]').val();
// p.to = $('[name=to]').val();
// p.order_no = $('[name=order_no]').val();
// p.name = $("[name=name]").val();
// p.mobile = $('[name=mobile]').val();
// p.status = $('[name=status]:checked').val();
// return p;
// },
sortName: 'name',
classes: "table table-striped table-no-bordered all-orders"
});

$(document).on('input', '.table-filter', function () {


if (window.filterTimeout) {
clearTimeout(window.filterTimeout);
}
window.filterTimeout = setTimeout(function () {
81
$("#orders-table").bootstrapTable('refresh');
}, 800);
}).on('change', '.table-filter', function () {
$("#orders-table").bootstrapTable('refresh');
$('label').removeClass('btn-fill');
if ($(this).prop('checked')) {
$(this).parent('label').addClass('btn-fill');
}
});
</script>

RETURN –FORM
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!-- item details -->
<div style="width:100%; overflow: auto; " class="table-responsive">
<style>
.return-item-table thead tr th{
text-align: center;
}
.return-item-table thead tr th:nth-child(2){
width:60px !important;
}
.return-item-table tbody tr td:nth-child(2){
width:60px !important;
}
.return-item-table tbody tr td:nth-child(1){
text-align: center;
}
.return-item-table tbody tr td{
vertical-align: middle;
82
}

.return-item-table tr td:nth-child(4),.return-item-table tr td:nth-child(5){


text-align: center;
}
.return-item-table tr td:nth-child(6),.return-item-table tr td:nth-child(7),.return-
item-table tr td:nth-child(8){
text-align: right;
}
</style>
<form action="user/orders/return-request.html" class="smooth-submit"
id="return-form" method="post">
<input type="hidden" name="order_id" value="<?= $order->order_id ?>">
<table class="table table-bordered table-striped return-item-table ">
<thead>
<tr>
<th></th>
<th><i class="fa fa-image"></i></th>
<th>Item</th>
<th>Measurement</th>
<th>SKU</th>
<th>Price</th>
<th>Qty.</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php foreach ($order->items as $key => $item): ?>
<tr>
<td><input type="checkbox"checked="" name="item_id[<?= $key ?
>]" value="<?= $item->product_id ?>"></td>
<td><img src="<?= $item->cover_url ?>" class="img-
responsive"></td>
<td><?= $item->product_name ?></td>
<td><?= $item->qty_unit ?></td>
83
<td><?= $item->sku ?></td>
<td><i class="fa fa-inr"></i><?= $item->rate ?></td>
<td><input type="text" name="item_qty[<?= $key ?>]" value="<?=
$item->qty ?>"></td>
<td><i class="fa fa-inr"></i><?= $item->amount ?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<td colspan="4" rowspan="3">
<textarea name="reason" class="form-control" rows="4"
placeholder="Return Reason*" style="min-height: 102px;max-height:102px;
"></textarea>
</td>
<td colspan="3" class="text-right" style=" font-weight: bold; ">Sub
Total</td>
<td class="text-right" style=" font-weight: bold; "><i class='fa fa-
inr'></i><?= $order->price ?></td>
</tr>
<tr>
<td colspan="3" class="text-right" style=" font-weight: bold;
">Shipping Charges</td>
<td class="text-right" style=" font-weight: bold; "><i class='fa fa-
inr'></i><?= $order->shipping_charges ?></td>
</tr>
<tr>
<td colspan="3" class="text-right" style=" font-weight: bold; ">Grand
Total</td>
<td class="text-right" style=" font-weight: bold; "><i class='fa fa-
inr'></i><?= $order->grand_total ?></td>
</tr>
</tfoot>
</table>
</form>
84
</div>
<!-- //item details -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" form="return-form">Save
changes</button>
</div>

Register.php:
<div class="container">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0"
style="background: #fff; margin-top: 50px; margin-bottom: 30px; padding-bottom: 15px;
box-shadow: 0 10px 15px -5px #000; ">
<h2>Register</h2>
<hr>
<form id="signup-form" class="smooth-submit" action="user/signup/register.html"
method="POST">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>First Name*</label>
<input type="text" class="form-control" placeholder="First Name"
name="fname">
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label>Last Name*</label>
<input type="text" class="form-control" placeholder="Last Name"
name="lname">
</div>

85
</div>
</div>

<div class="form-group">
<label>Mobile*</label>
<input type="text" class="form-control" placeholder="Mobile" name="mobile">
</div>

<div class="form-group">
<label>Email* (Used as username)</label>
<input type="email" class="form-control" placeholder="E-Mail" name="email">
</div>

<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>New Password*</label>
<input type="password" class="form-control" placeholder="New Password"
name="password">
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label>Confirm Password*</label>
<input type="password" class="form-control" placeholder="Confirm
Password" name="c_password">
</div>
</div>
</div>

<div class="form-group">
<label>Address*</label>
<textarea class="form-control" placeholder="Address" name="add"></textarea>
86
</div>

<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>City*</label>
<input type="text" class="form-control" placeholder="City" value='Agra'
readonly="" name="city">
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label>Pin Code*</label>
<?= form_dropdown('pin_code', get_options_array(get_pincodes()), $user-
>user_zip, ['class' => 'form-control']) ?>
</div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label>Area</label>
<?= form_dropdown('area', get_options_array(get_areas(), 'Select Area'), '',
['class' => 'form-control']) ?>
</div>
</div>
</div>

<button type="submit" class="btn btn-primary pull-right">Submit</button>


</form>
</div>
</div>
<script>
$(document).on('aftersubmit', 'form#signup-form', function (e, data) {
87
malert(data.messege, data);
if (data.location) {
change_page(data.location);
}
});
</script>
}
}

Checkout.php:
<div class="checkout">
<div class="modal-header">
<h3 class="modal-title pull-left text-danger">Checkout</h3>
<button type="button" class="close pull-right" data-dismiss="modal"
aria-hidden="true"><i class="fa fa-close text-danger"></i></button>
</div>
<div class="modal-body">
<div class="row">
<!-- Tabs with icons on Card -->
<div class="card card-nav-tabs card-plain">
<div class="header header-success">
<!-- colors: "header-primary", "header-info", "header-
success", "header-warning", "header-danger" -->
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#billing_detail" data-toggle="tab">
<i class="fa fa-file-text"></i>
Billing Details
</a>
</li>
<li>
<a href="#shipping_deteil" data-toggle="tab">
<i class="fa fa-motorcycle"></i>
Shipping Details
</a>
</li>
<li>
<a href="#your_order" data-toggle="tab">
<i class="fa fa-shopping-cart"></i>
Your Order
88
</a>

</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="tab-content">
<div class="tab-pane active animated zoomIn"
id="billing_detail">
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;First Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Middle Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Last Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-8">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
envelope"></i>&nbsp;&nbsp;&nbsp;E-Mail</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">

89
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
phone"></i>&nbsp;&nbsp;&nbsp;Mobile</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Address Line - 1</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Address Line - 2</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;City</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Postcode/ZIP</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<button class="btn btn-lg btn-success pull-right"
href="#shipping_deteil" data-toggle="tab">Next&nbsp;&nbsp;&nbsp;<i
class="fa fa-chevron-right"></i></button>
</div>

90
</div>
<div class="tab-pane animated zoomIn"
id="shipping_deteil">
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;First Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Middle Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Last Name</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-8">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
envelope"></i>&nbsp;&nbsp;&nbsp;E-Mail</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
phone"></i>&nbsp;&nbsp;&nbsp;Mobile</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-6">

91
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Address Line - 1</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Address Line - 2</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;City</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Postcode/ZIP</label>
<input class="form-control">
</div>
</div>

<div class="col-sm-4">
<button class="btn btn-lg btn-success pull-right"
href="#your_order" data-toggle="tab">Next&nbsp;&nbsp;&nbsp;<i
class="fa fa-chevron-right"></i></button>
</div>
</div>
<div class="tab-pane animated zoomIn" id="your_order">
<div class="col-md-6 col-md-offset-3">
<table class="table">
<thead>
<tr style="font-weight: bold;">
<td>Product</td>
<td class="text-right">Total</td>

92
</tr>
</thead>

<tbody>
<tr>
<td>Lux x 3</td>
<td class="text-right"><i class="fa fa-
inr"></i>&nbsp;&nbsp;75.00</td>
</tr>
</tbody>

<tfoot>
<tr style="font-weight: bold;">
<td>Grant Total</td>
<td class="text-right"><i class="fa fa-
inr"></i>&nbsp;&nbsp;75.00</td>
</tr>
</tfoot>
</table>
</div>
<div class="clearfix"></div>
<div class="col-xs-12">
<button class="btn btn-lg btn-success pull-
right">Place Order&nbsp;&nbsp;&nbsp;<i class="fa fa-
check"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- End Tabs with icons on Card -->
</div>
</div>
</div>

Product:
<script type="text/javascript">
$(document).ready(function () {
$('#left-sidebar').BootSideMenu({side: "left"});
$('#right-sidebar').BootSideMenu({side: "right"});
});
</script>
<div id="left-sidebar">
<div class="col-xs-12">
<h4>Product Filter</h4>

93
<div class="radio">
<label>
<input form="search-form-lg" type="radio" name="sort_select" class="sort-
select" value="atz" <?= call_user_func($sort, 'atz') ?>>
A-Z
</label>
</div>
<div class="radio">
<label>
<input form="search-form-lg" type="radio" name="sort_select" class="sort-
select" value="zta" <?= call_user_func($sort, 'zta') ?>>
Z-A
</label>
</div>
<div class="radio">
<label>
<input form="search-form-lg" type="radio" name="sort_select" class="sort-
select" value="plth" <?= call_user_func($sort, 'plth') ?>>
Low to High
</label>
</div>
<div class="radio">
<label>
<input form="search-form-lg" type="radio" name="sort_select" class="sort-
select" value="phtl" <?= call_user_func($sort, 'phtl') ?>>
High to Low
</label>
</div>
<hr>
<h4>Category</h4>
<div class="catelog-accordion">
<?= get_cat_accordion(get_cats(), '<div class="radio"><label><input
form="search-form-lg" class="category-select" type="radio" name="category_select"
value="{cat-id}">{cat-name}</label></div>{cat-subs}', '<div
class="radio"><label><input checked class="category-select" form="search-form-lg"
type="radio" name="category_select" value="{cat-id}">{cat-
name}</label></div>{cat-subs}', [$_REQUEST['category']]) ?>
</div>
</div>
</div>
<div class="container-fluid" style="overflow: auto;">
<h4><?= $search_heading ?></h4>

<div class="row">
<style>
.wishlist-product-page-with-cart{
display: none;
}
.cart-action .btn{
padding: 0 7px;
height: 28px;
line-height: 28px;
94
}
.btn-category-slider{
float: right;
}
.cart-action input{
margin-top:5px;
}

.cart-action{
width: 100%;
}
a[title="Remove from cart"]{
margin-left: 0px;
}

.cart-quantity-button{
height: 28px;
width:25px;
line-height: 28px;
padding: 0;
position: absolute;
}
.qty-plus-minus{
float: right; width:75px; position: relative; padding: 0; margin: 0;
}
@media (min-width: 320px) {
.i-phone-5{
display: none;
}
.qty-plus-minus{
width:82px;
}
.phone-cart-btn{
display: none;
}
}
@media (min-width: 374px) {
.i-phone-5{
display: inline-block;
}
.qty-plus-minus{
width:75px;
}
.phone-cart-btn{
display: inline-block;
}
}
@media (min-width: 768px) {
.cart-quantity-button{
height: 28px;
width:28px;
line-height: 28px;
95
padding: 0;
position: absolute;
}
.qty-plus-minus{
float: right; width:96px; position: relative; padding: 0; margin: 0;
}
}
@media (min-width: 992px) {
a[title="Remove from cart"]{
margin-left: 4px;
}
.cart-quantity-button{
height: 28px;
width:25px;
line-height: 28px;
padding: 0;
position: absolute;
}
.qty-plus-minus{
width:100px;
}
.i-phone-5{
display: none;
}
}
</style>
<?php foreach ($products as $product): ?>
<div class="col-md-2 col-sm-4 product-catalog product-<?= $product-
>product_id ?>">
<div class="form-group">
<div class="row">
<div class="col-xs-5 col-sm-12">
<a class="load-page" data-type='html' href="home/product-
view.html?id=<?= $product->product_id ?>">
<img src="<?= $product->cover_url ?>" class="img-responsive
img-rounded">
<?php if ($product->get_stock() == 0): ?>
<img src="assets/images/oos.png" style="position: absolute;
top: 0px; left: 15px; width:calc(100% - 30px); height: 100%;">
<?php endif; ?>
</a>
</div>
<div class="col-left-15px col-sm-12 col-xs-7 ">
<div class="row">
<div class='col-sm-12'><h6 title="Product Name" class="product-
name"><?= $product->name ?></h6></div>
<div class='col-sm-12'><p title="Description" class="product-
description"><?= $product->short_desc; ?></p></div>
<div class='col-sm-12'><p title="Description" class="product-
measurement"><?= $product->qty_unit ?></p></div>

96
<div class='col-sm-12'><p title="Price" class="product-price"><?
= $product->sale_price ?> &nbsp;&nbsp;<del><?= $product->price ?></del></p>
</div>

<div class='col-xs-12 cart-action' id='row-<?= $product-


>product_id ?>'>
<?= $product->cart_action() ?>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<?php endforeach; ?>
</div>

<div class="clearfix"></div>
<!-- //Top row -->
<br>

<div class="row">
<div class="col-md-4 col-md-offset-4">

<?php if (count($pagination) > 3): ?>


<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<?php foreach ($pagination as $page): ?>
<li class="<?= $page['class'] ?>">
<a href="#" class="page-nav-btn <?= $page['a_class'] ?>" data-
page="<?= $page['number'] ?>" aria-label="Previous"><?= $page['label'] ?></a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<?php endif; ?>
</div>
</div>

<!-- <nav>
<ul class="pager">
<li><a href="#" class="btn btn-primary page-nav-btn" data-page='<?=
$_GET['page'] - 1 ?>' style="width: 100px;">Previous</a></li>
<li><a href="#" class="btn btn-primary page-nav-btn" data-page='<?=
$_GET['page'] + 1 ?>' style="width: 100px;">Next</a></li>
</ul>
</nav>-->
</div>

97
PRODUCT –VIEW

<div class="container product-quick-view product-<?= $product-


>product_id ?>" style="margin-top: 30px">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-5 col-sm-6">
<div id="sync" class="owl-carouso">
<div class="item text-center"><img src="<?= $product-
>cover_url ?>" class="img-responsive" width="100%"></div>
<?php if ($product->get_stock() == 0): ?>
<img src="assets/images/oos.png" style="position:
absolute; top: 0px; left: 15px; width:calc(100% - 30px); height: 100%;">
<?php endif; ?>
</div>

</div>

<div class="col-md-7 col-sm-6">


<div class="row">
<div class="col-sm-10">
<h3 class="product-name text-success"><?= $product-
>name ?></h3>
</div>
</div>
<div class="clearfix"></div>
<h4 class="product-description"><?= $product->short_desc ?
></h4>
<h2 class="product-price"><?= $product->sale_price ?>
<del><?= $product->price ?></del></h2>
<h4 class="product-measurement"><?= $product->qty_unit ?
></h4>
<div class="col-md-12">
<div class="row">
<p class="product-stock-msg"><?= $product-
>get_stock('{qty} in stock', "Out of Stock"); ?></p>
</div>
</div>
<style>

.cart-action{
98
width:302px;
margin-top:15px;
}
.wishlist-product-page-with-cart{

}
.cart-action .btn{
padding: 0 7px;
height: 28px;
line-height: 28px;
}
.cart-quantity-button{
height: 28px;
width: 28px;
line-height: 28px;
padding: 0;
position: absolute;
}
.qty-plus-minus{
float: right;
width:90px;
position: relative;
padding: 0;
margin: 0;
margin-right:10px;
}
@media (min-width: 320px) {

}
@media (min-width: 374px) {
.cart-action{
width:312px;
}
.qty-plus-minus{
width:100px;
}
}
@media (min-width: 768px) {

}
@media (min-width: 992px) {
.cart-action{
width:312px;
margin-top:0px;

99
}
.cart-action .btn{
padding: 0 7px;
height: 28px;
line-height: 28px;
}
}
</style>
<div class="clearfix"></div>

<div class="cart-action" id='row-<?= $product->product_id ?


>'>
<?= $product->cart_action() ?>
</div>

<?php if (!empty($product->long_desc)): ?>


<div class="row">
<div class="col-xs-12 text-justify">
<h3>Product Description</h3>
<?= $product->long_desc ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>

</div>
CART-ACTION:

<?php if ($row = in_cart($product->product_id)): ?>


<?php if (!in_wishlist($product->product_id)): ?>
<a href="user/wishlist/add.html?id=<?= $product->product_id ?>&sku=<?=
$product->sku ?>" class="btn btn-success smooth-submit wishlist-add-btn pull-left"
title="Add to Wishlist" p-id="<?= $product->product_id ?>"><span class="wishlist-product-
page-with-cart"><i class="fa fa-plus"></i>&nbsp;&nbsp;Wishlist&nbsp;&nbsp;</span><i
class="fa fa-heart-o"></i></a><span class="pull-left">&nbsp;&nbsp;</span>
<?php else: ?>
<a href="user/wishlist/remove.html?id=<?= $product->product_id ?>&sku=<?=
$product->sku ?>" class="btn btn-warning smooth-submit wishlist-add-btn pull-left"
title="Add to Wishlist" p-id="<?= $product->product_id ?>"><span class="wishlist-product-
page-with-cart"><i class="fa fa-plus"></i>&nbsp;&nbsp;Wishlist&nbsp;&nbsp;</span><i
class="fa fa-heart-o"></i></a><span class="pull-left">&nbsp;&nbsp;</span>
<?php endif; ?>
100
<a p-id="<?= $product->product_id ?>" href="my-cart/update-qty.html?rowid=<?=
$row['rowid'] ?>&qty=0" class="btn btn-danger smooth-submit add-cart-btn"
style="height:28px; padding: 0 7px; line-height: 28px;" title="Remove from cart"><i
class="fa fa-close"></i><span class="i-phone-5">&nbsp;&nbsp;cart&nbsp;&nbsp;</span> <i
class="fa fa-cart-plus"></i></a>

<div class="qty-plus-minus">
<button class="btn btn-danger fa fa-minus cart-quantity-button" style="left:0;"
></button>
<input style="width:100%; padding: 0 25px; text-align: center; height: 28px;
border:1px solid #900;" class="cart-quantity-input" rowid="<?= $row['rowid'] ?>" value="<?
= $row['qty'] ?>" min="1">
<button class="btn btn-danger fa fa-plus cart-quantity-button" style="right:0; top:
0;"></button>
</div>

<?php else: ?>


<?php if (!in_wishlist($product->product_id)): ?>
<a href="user/wishlist/add.html?id=<?= $product->product_id ?>&sku=<?=
$product->sku ?>" class="btn btn-success smooth-submit wishlist-add-btn pull-left"
title="Add to Wishlist" p-id="<?= $product->product_id ?>"><span class="wishlist-product-
page-without-cart"><i class="fa fa-plus"></i>&nbsp;&nbsp;Wishlist&nbsp;&nbsp;</span><i
class="fa fa-heart-o"></i></a><span class="pull-left">&nbsp;&nbsp;</span>
<?php else: ?>
<a href="user/wishlist/remove.html?id=<?= $product->product_id ?>&sku=<?=
$product->sku ?>" class="btn btn-warning smooth-submit wishlist-add-btn pull-left"
title="Add to Wishlist" p-id="<?= $product->product_id ?>"><span class="wishlist-product-
page-without-cart"><i class="fa fa-
close"></i>&nbsp;&nbsp;Wishlist&nbsp;&nbsp;</span><i class="fa fa-heart-
o"></i></a><span class="pull-left">&nbsp;&nbsp;</span>
<?php endif; ?>
<?php if ($product->get_stock() != 0): ?>
<a href="my-cart/add.html?id=<?= $product->product_id ?>&sku=<?= $product-
>sku ?>" class="btn btn-danger smooth-submit add-cart-btn btn-category-slider" p-id="<?=
$product->product_id ?>"><i class="fa fa-plus">&nbsp;&nbsp;<span class="phone-cart-
btn">Cart&nbsp;&nbsp;</span></i><i class="fa fa-cart-plus"></i></a>
<?php endif; ?>
<?php endif; ?>

CART VIEW
<div class="cart-view" style="z-index: 999999;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"><i class="fa fa-close text-danger"></i></button>
<h3 class="modal-title text-danger" id="myModalLabel">My Cart</h3>
<script> $('[data-toggle="tooltip"]').tooltip();</script>
</div>
<div class="modal-body">
101
<table class="table table-striped">
<thead class="hidden-xs hidden-sm">
<tr>
<td>
<div class="row ">
<div class="col-md-1"></div>

<div class="col-md-4">Product Name</div>

<div class="col-md-2 text-right">Price</div>

<div class="col-md-2 text-center">Quantity</div>

<div class="col-md-2 text-right">Total</div>


<div class="col-md-1"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<style>
.view-cart{
position: relative !important;
width:110px !important;
background: #ff0 !important;
height: 22px;
margin: 0 !important;
padding: 0 !important;
margin-left:auto !important;
margin-right:auto !important;
margin-bottom: 5px !important;
}
.view-cart button{
position: absolute !important;
margin:0 !important;
padding:0 5px !important;
line-height: 18px !important;
height: 26px;
}
.view-cart button:first-child{
left:0 !important;
z-index: 9;
margin: 0 !important;
padding: 0 !important;
}
.view-cart button:last-child{
right:0 !important;
margin: 0 !important;
padding: 0 !important;
}
.view-cart input{
102
width:100% !important;
position: absolute !important;
right: 0 !important;
text-align: center;
height: 26px;
border: 1px solid #900;
}

</style>
<?php foreach ($items as $key => $item): ?>
<tr>
<td>
<div class="row">
<div class="col-md-1 col-md-offset-0 col-sm-2 col-sm-offset-0
col-xs-4 col-xs-offset-4 ">
<img src="<?= $item['options']['image'] ?>" class="img-
responsive">
</div>
<div class="col-md-1 pull-right hidden-lg hidden-md hidden-
sm"><a class="smooth-submit cart-remove-item-btn" href="my-cart/update-qty.html?
rowid=<?= $item['rowid'] ?>" p-id="<?= $item['id'] ?>"><i class="fa fa-close text-primary"
data-toggle="tooltip" data-placement="left" title="Remove Item"></i></a></div>
<div class="hidden-lg hidden-md hidden-sm"><div
class="clearfix"></div></div>

<div class="col-md-4 col-sm-10 cart-product-name"><a


class="load-page" href="home/product-view.html?id=<?= $item['id'] ?>"><?=
$item['name'] ?></a></div>

<div class="col-md-2 col-sm-3 cart-price-1"><i class="fa fa-


inr"></i> <?= $item['price'] ?></div>

<div class="col-md-2 col-sm-3">


<div class="view-cart">
<button class="btn btn-xs btn-danger fa fa-minus cart-
quantity-button" ></button>
<input class="cart-quantity-input" value="<?= $item['qty'] ?
>" rowid="<?= $item['rowid'] ?>">
<button class="btn btn-xs btn-danger fa fa-plus cart-quantity-
button"></button>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-2 col-sm-3 cart-price-2" style="font-weight:
bold;" id="<?= "price-" . $item['rowid'] ?>"><i class="fa fa-inr"></i> <span><?=
$item['subtotal'] ?></span></div>
<div class="col-md-1 col-sm-1 hidden-xs"><a class="smooth-
submit cart-remove-item-btn" p-id="<?= $item['id'] ?>" href="my-cart/update-qty.html?
rowid=<?= $item['rowid'] ?>"><i class="fa fa-close pull-right text-primary" data-
toggle="tooltip" data-placement="top" title="Remove Item"></i></a></div>
</div>
</td>
103
</tr>
<?php endforeach; ?>
</tbody>
<tfoot id="grand-total">
<tr>
<td>
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-6 cart-total-lable">
<p>Products Total</p>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 cart-total-price"><i
class="fa fa-inr"></i> <span class="total-price"><?= $total_amt ?></span></div>
<div class="clearfix"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-6 cart-total-lable">
<p>Shipping Charges</p>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 cart-total-price"><i
class="fa fa-inr"></i> <span class="shipping-charges"><?= $shipping_charges ?
></span></div>
<div class="clearfix"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-6 cart-total-lable">
<p>Total Amount</p>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 cart-total-price"><i
class="fa fa-inr"></i> <span class="grand-total"><?= $shipping_charges + $total_amt ?
></span></div>
<div class="clearfix"></div>
</div>
</td>
</tr>
</tfoot>
</table>

<div id="order-form-container">
<?php if (!is_logged_in()): ?>
<h5 class="text-warning text-center">Note: Please <a class="load-page"
href="user/login.html">Login</a> or <a class="load-page"
href="user/signup.html">Signup</a> to proceed to checkout.</h5>
<?php elseif ($total_amt < $min_checkout_amt): ?>

104
<h5 class="text-warning text-center">Note: Minimum cart amount of <i
class="fa fa-inr"></i> <?= $min_checkout_amt ?> is required for checkout.</h5>
<?php else: ?>
<form class="smooth-submit" action="checkout/place-order.html"
method="POST" id="place-order-form">
<input type="hidden" name="distance" value="<?=
@$_COOKIE['distance']; ?>">
<input type="hidden" name="lat" value="<?= @$_COOKIE['lat'] ?>">
<input type="hidden" name="lng" value="<?= @$_COOKIE['lng'] ?>">
<h3 class="text-center">Checkout</h3>
<h5>Shipping Details</h5>
<div class="row">
<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;First Name</label>
<input class="form-control" name="fname_ship" value="<?=
$user->user_first_name ?>">
</div>
</div>

<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Last Name</label>
<input class="form-control" name="lname_ship" value="<?=
$user->user_last_name ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
envelope"></i>&nbsp;&nbsp;&nbsp;E-Mail</label>
<input class="form-control" name="email_ship" value="<?=
$user->user_email ?>">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
phone"></i>&nbsp;&nbsp;&nbsp;Mobile</label>
<input class="form-control" name="mobile_ship" value="<?=
$user->user_mobile ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group label-floating">
105
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Full Address</label>
<textarea class="form-control" name="add_ship"><?= $user-
>user_address ?></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;City</label>
<input class="form-control" name="city_ship" value="<?= $user-
>user_city ?>">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Pin/ZIP Code</label>
<input class="form-control" name="pin_ship" value="<?= $user-
>user_zip ?>">

<!-- form_dropdown("pin_ship",
get_options_array(get_pincodes()), $user->user_zip, ["class" => "form-control"]) ?>-->
</div>
</div>
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Area</label>
<input class="form-control" name="area_ship" value="<?=
$user->user_area ?>">

<!-- form_dropdown("area_ship", get_options_array(get_areas()),


$user->user_area, ["class" => "form-control"]) ?>-->
</div>
</div>
</div>
<h5><input id="billing-details-toggle" type="checkbox" name="same"
checked="" value="true"> Same billing Details as shipping details</h5>
<div id="billing-details" style="display:none">
<h5>Billing Details</h5>
<div class="row">
<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;First Name</label>
<input class="form-control" name="fname_bill" value="<?=
$user->user_first_name ?>">
</div>
106
</div>

<div class="col-sm-6">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
user"></i>&nbsp;&nbsp;&nbsp;Last Name</label>
<input class="form-control" name="lname_bill" value="<?=
$user->user_last_name ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
envelope"></i>&nbsp;&nbsp;&nbsp;E-Mail</label>
<input class="form-control" name="email_bill" value="<?=
$user->user_email ?>">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-
phone"></i>&nbsp;&nbsp;&nbsp;Mobile</label>
<input class="form-control" name="mobile_bill"value="<?=
$user->user_mobile ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Address Line - 1</label>
<textarea class="form-control" name="add_bill"><?= $user-
>user_address ?></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;City</label>
<input class="form-control" name="city_bill" value="<?=
$user->user_city ?>">
</div>
</div>

<div class="col-sm-4">
<div class="form-group label-floating">
107
<label class="control-label"><i class="fa fa-map-
marker"></i>&nbsp;&nbsp;&nbsp;Postcode/ZIP</label>
<input class="form-control" name="pin_bill" value="<?=
$user->user_zip ?>">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Place Order</button>
</form>
<?php endif; ?>
</div>
</div>

</div>

CART-VIEW-EMPETY
<div class="cart-view">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"><i class="fa fa-close text-danger"></i></button>
<h3 class="modal-title text-danger" id="myModalLabel">My
Cart</h3>
<script> $('[data-toggle="tooltip"]').tooltip();</script>
</div>
<div class="modal-body">
<hr>
<h4 class="text-center text-danger">Your cart is empty</h4>
</div>
</div>

Login ADMIN:
<!doctype html>
<html lang="en">
<head>
<base href="<?= base_url() ?>">
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

<!-- Bootstrap core CSS -->


<link href="assets_admin/css/bootstrap.min.css" rel="stylesheet" />

<!-- Animation library for notifications -->

108
<link href="assets_admin/css/animate.min.css" rel="stylesheet"/>

<!-- Light Bootstrap Table core CSS -->


<link href="assets_admin/css/light-bootstrap-dashboard.css" rel="stylesheet"/>

<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets_admin/css/demo.css" rel="stylesheet" />

<!-- Fonts and icons -->


<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300'
rel='stylesheet' type='text/css'>
<link href="assets_admin/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>

<!-- ########################### code copy for login page


################################## -->
<body style="height:100% !important; position:absolute; width:100%;">
<div class="main-panel" style="width:100% !important;">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<img src="assets/images/arpit.png" class="img img-responsive"
alt="jain electonics" style="margin:auto;">
<div class="card">
<div class="header">
<h4 class="title">Admin Login</h4>
</div>
<div class="content">
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"
placeholder="Username" tabindex="1" autofocus="" >
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"
placeholder="Password" tabindex="2" >
</div>
109
</div>
</div>

<a href="#" class="pull-left">Forget Password</a>

<button type="submit" class="btn btn-info btn-fill pull-right"


tabindex="3">Login</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- ########################### code copy for login page
################################## -->

<!-- Core JS Files -->


<script src="assets_admin/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets_admin/js/bootstrap.min.js" type="text/javascript"></script>

<!-- Checkbox, Radio & Switch Plugins -->


<script src="assets_admin/js/bootstrap-checkbox-radio-switch.js"></script>

<!-- Charts Plugin -->


<script src="assets_admin/js/chartist.min.js"></script>

<!-- Notifications Plugin -->


<script src="assets_admin/js/bootstrap-notify.js"></script>

<!-- Google Maps Plugin -->


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
sensor=false"></script>

<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets_admin/js/light-bootstrap-dashboard.js"></script>

<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets_admin/js/demo.js"></script>

</html>
Order ADMIN:
<style>
.manual-order thead th:first-child{
width:60px;
}
.manual-order thead th:nth-child(3){
width:100px;
}
110
.manual-order thead th:nth-child(4){
width:120px;
}
.manual-order thead th:last-child{
width:150px;
}
.manual-order tbody tr td{
padding:0px;
height:34px;
}
.manual-order .form-control{
height:34px;
border:none !important;
}
.manual-order .selectize-control {
height:34px;
border:1px solid #fff !important;
}
.manual-order .selectize-control.single .selectize-input, .selectize-control.single .selectize-
input input {
border: none;
}
</style>
<div class="col-md-12">
<div class="card" >
<div class="content">
<form action="create/order.html" method="post" class="smooth-submit">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Area</label>
<select name="area" id="area-selector" class="form-control" required=''>
<option value=''></option>
<?php foreach ($areas as $area): ?>
<option value="<?= $area->area_id ?>"><?= $area->area_name ?
></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>First Name</label>
<input name="fname" type="text" class="form-control" required=''
pattern='[A-Z a-z]{1,50}'>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Last Name</label>
<input name="lname" type="text" class="form-control" pattern='[A-Z a-z]
{1,50}'>
111
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Mobile</label>
<input name="mobile" type="text" class="form-control" required=''
pattern='[1-9]{1}[0-9]{9}'>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<textarea name="address" class="form-control" required=''></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>E-mail</label>
<input name="email" type="email" class="form-control" >
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>PIN/ZIP Code</label>
<input name="pin" type="text" class="form-control" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table manual-order table-bordered table-hover">
<thead>
<tr>
<th style='width:50px;'>Sr.</th>
<th>Particular</th>
<th style='width:70px;'>Stock</th>
<th style='width:60px;'>Qty.</th>
<th style='width:80px;'>Rate</th>
<th style='width:100px;'>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select class="selectize product-input" name="products[]" data-live-
search='true'>
<option value="">Select Product</option>
112
<?php foreach ($products as $product): ?>
<option value="<?= $product->product_id ?>"><?= $product-
>name ?> (<?= $product->qty_unit ?>) (MRP - <?= $product->max_rate ?>) (Sale - <?=
$product->sale_rate ?>) (Stock - <?= $product->stock ?>)</option>
<?php endforeach; ?>
</select>
</td>
<td class="stock"></td>
<td class="qty">
<input type="text" name="qtys[]" class="form-control" pattern="[1-
9]{1}[0-9]{0,9}" value='1'>
</td>
<td class="text-right rate" >00.00</td>
<td class="text-right amt" >00.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5" class="text-right">Total</th>
<th class="text-right" id='total'></th>
</tr>
<tr>
<th colspan="5" class="text-right">Shipping</th>
<th class="text-right" id="shipping"></th>
</tr>
<tr>
<th colspan="5" class="text-right">Grand Total</th>
<th class="text-right" id="g_total"></th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-info pull-right btn-fill">Place Order</button>
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
</div>
<script>
var row = $('tbody tr:first-child').clone();

$(document).on('change', 'tr .selectize', function () {


var element = this;
if (element.value) {
$.getJSON("get/product/" + this.value + ".html", {}, function (data) {
$(element).parents('tr').find('.rate').text(data.sale_rate);
$(element).parents('tr').find('.stock').text(data.stock);
113
$(element).parents('tr').find('.qty input').trigger('input');
});
}
}).on('change', 'tr:last-child .selectize', function () {
var element = this;
if (element.value) {
var clone = row.clone();
clone.find('.selectize').selectize();
$('tbody').append(clone);
clone.find('td:first-child').text(clone.index() + 1);
}
}).on('change', 'tr:nth-last-child(2) .selectize', function () {
if (!this.value) {
$('tbody tr:last-child').remove();
}
}).on('input', '.qty input', function () {
var current = $(this).parents('tr');
var qty = parseInt($(this).val() || 0);
var rate = parseInt(current.find('.rate').text());
current.find('.amt').text(rate * qty);

total2 = 0.0;
$(".amt").each(function () {
amt2 = parseFloat($(this).html());
total2 += amt2;
});

$("#total").text(total2);
var area = $('#area-selector').val();
$.getJSON("get/shipping-charges/" + area + ".html", {amt: total2}, function (data) {
$('#shipping').text(data.shipping_charges);
// console.log(data);

$('#g_total').text(parseInt(data.shipping_charges) + parseInt(total2));
});
}).on('input', '#area-selector', function () {
$('.qty:first').trigger('input');
})

$('.selectize').selectize();
</script>

PRODUCT ADMIN
<div class="header">
<h5 class="title pull-left">Product Image (Cover)</h5>
<label class="pull-right">
<span class="btn btn-xs btn-info btn-fill">Add Image</span>
<input type="file" id="cover" name='images[]' require style="display: none;"
accept="image/jpeg, image/png" form='add-product-form'>
</label>
</div>
114
<div class="content">
<img src="<?= config_item('products')['default_cover'] ?>" width="100%" class="img
img-responsive img-thumbnail" id="p_img">
</div>
<div class="header">
<h5 class="title">Product Image Gallery</h5>
</div>
<div class="content">
<div class="row" style="padding: 7px;" id="gallery">
<label style="width:25%; height: 80px; padding: 7px; float: left;">
<div style="width:100%; height: 100%; padding:7px; background: #eee;text-align:
center; line-height: 60px;">
<span class="fa fa-2x fa-plus"></span>
<input type="file" id="gallery-images" name='images[]' style="display: none;"
accept="image/jpeg, image/png" form='add-product-form' multiple="">
</div>
</label>
<div class="clearfix"></div>
</div>
</div>
PRODUCT ADD
<div id="refresh">
<div class="col-md-8" id="col1">
<div class="card">
<div class='content'>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Product Name</label>
<input type="text" name="name" class="form-control input-lg"
placeholder="Product Name" form="add-product-form" value="<?= $product->name ?>">
</div>
</div>
</div>
</div>
</div>
<div>
<div class='col-md-12'>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#simple_product" aria-
controls="home" role="tab" data-toggle="tab">Add Simple Product</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- Tab panes -->
<div class="card tab-content">
<div role="tabpanel" class="tab-pane active" id="simple_product">
<div class="content">
<form action="<?= $action ?>" enctype="multipart/form-data"
method="post" id="add-product-form" class="smooth-submit">
<?= $id ?>
115
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>SKU</label>
<input name="sku" data-toggle="tooltip" data-
placement="bottom" title="SUK for Manage Stock" type="text" class="form-control"
placeholder="SKU" require value="<?= $product->sku ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>MRP Price</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-
inr"></i></span>
<input name="mrp" data-toggle="tooltip" data-
placement="bottom" title="Maximum Sale Price" type="text" class="form-control"
placeholder="MRP Price" require value="<?= $product->max_rate ?>">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Sale Price</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-
inr"></i></span>
<input name="sale_price" data-toggle="tooltip" data-
placement="bottom" title="Your Offer Price" type="text" class="form-control"
placeholder="Offer Price" value="<?= $product->sale_rate ?>">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Brand</label>
<input name="brand" data-toggle="tooltip" data-
placement="bottom" title="Product Brand" type="text" class="form-control"
placeholder="Brand" require value="<?= $product->brand ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Model/Serial</label>
<input name="model" data-toggle="tooltip" data-
placement="bottom" title="Product Model" type="text" class="form-control"
placeholder="Model" require value="<?= $product->model ?>">
</div>
</div>
</div>
116
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Quantity Unit</label>
<input name="qty_unit" data-toggle="tooltip" data-
placement="bottom" title="Quantity unit for product" type="text" class="form-control"
placeholder="Unit" require value="<?= $product->qty_unit ?>">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label>Stock Quantity</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-
database"></i></span>
<input name="stock" data-toggle="tooltip" data-
placement="bottom" type="text" class="form-control" placeholder="Enter Stock Quantity"
title="Product Stock" value="<?= $product->stock ?>">
<span class="input-group-addon">Units</span>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Minimum Quantity in Cart</label>
<input name="min_qty" type="text" class="form-control"
placeholder="Minimum Quantity in Cart" value="<?= $product->min_qty ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Maximum Quantity in Cart</label>
<input name="max_qty" type="text" class="form-control"
placeholder="Maximum Quantity in Cart" value="<?= $product->max_qty ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Cart Amount For Checkout</label>
<input name="min_cart_amt" type="text" class="form-control"
placeholder="Enter Stock Quantity" value="<?= $product->min_cart_amt ?>">
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="form-group">
117
<label>Short Description</label>
<input class="form-control" name="short_desc" value='<?=
$product->short_desc ?>'>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Long Description</label>
<textarea class="ckeditor" name="long_desc"><?= $product-
>long_desc ?></textarea>
</div>
</div>
</div>

<button type="submit" class="btn btn-info btn-fill pull-right"><?=


$button ?></button>
<div class="clearfix"></div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>

<!-- #### -->


<div class="col-md-4" id="col2">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="header">
<h5 class="title">Product Category</h5>
</div>
<div class="content cate-main" style="height:488px; overflow: auto;">
<?= get_cat_accordion(get_cats(), "<input name='categories[]' type='checkbox'
value='{cat-id}' form='add-product-form'> {cat-name}{cat-subs}", "<input
name='categories[]' checked type='checkbox' value='{cat-id}' form='add-product-form'> {cat-
name}{cat-subs}", $product->categories) ?>
</div>
</div>
</div>

<div class="col-xs-12">
<div class="card" id="manage-images">
<?= $manage_images ?>
</div>
118
</div>
</div>
</div>
</div>

EDIT ADMIN
<div class="header">
<h5 class="title pull-left">Product Image (Cover)</h5>
<label class="pull-right">
<a href="admin/products/manage-images.html?id=<?= $product->product_id ?>"
id="img-edit" class="btn btn-xs btn-info btn-fill smooth-submit">MANAGE IMAGES</a>
</label>
</div>
<div class="content" id="product-cover">
<img src="<?= $product->cover_url ?>" width="100%" class="img img-responsive img-
thumbnail" id="p_img">
</div>
<div class="header">
<h5 class="title">Product Image Gallery</h5>
</div>
<div class="content">
<div class="row" style="padding: 7px;" id="gallery">
<?php foreach ($product->images as $key => $value): ?>
<div class="gallery-img old"><img src="<?= $value ?>" class="img img-responsive
animated bounceIn"></div>
<?php endforeach; ?>
<div class="clearfix"></div>
</div>
</div>
SCRIPT ADMIN
<script>
$(document).on('change', '#cover', function () {
if (this.files[0]) {
var url = URL.createObjectURL(this.files[0]);
} else {
var url = "images/products/default_cover.png";
}
$('#p_img').attr('src', url);

}).on('change', '#gallery-images', function () {


var files = this.files;
$('.gallery-img.new').remove();
$.each(files, function (index) {
var url = URL.createObjectURL(this);
$('#gallery').prepend('<div class="gallery-img new"><img src="' + url + '" class="img
img-responsive animated bounceIn"></div>');
});
}).on('aftersubmit', '#add-product-form', function (e, data) {
malert(data.messege, data);
if (data.reset) {
$.get(window.location, {}, function (data) {
119
$('#refresh').html($(data).find('#refresh').html());
$('[name=short_desc], [name=long_desc]').ckeditor();
});
}
}).on('aftersubmit', '#img-edit', function (e, data) {
if (data.content) {
$('#modal-lg .card').html(data.content);
$('#modal-lg').modal('show');
} else {
malert(data.messege, data);
}
return false;
}).on('aftersubmit', '.make-cover, .delete-img, #upload-img-form', function (e, data) {
malert(data.messege, data);
if (data.content) {
$('#modal-lg .card').html(data.content);
if (data.cover) {
$('#p_img').attr('src', data.cover);
}
if (data.gallery) {
$('#manage-images').html(data.gallery);
}
}
}).on('change', '#upload-img', function () {
$(this).parents('form').trigger('submit');
});
</script>
MANAGE-images
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
class="fa fa-close"></i></button>
<h4 class="modal-title">Manage Images</h4>
</div>
<div class="modal-body">
<?php foreach ($product->images as $key => $value): ?>
<?php
if ($product->image_names[$key] == $product->cover) {
$class = "btn-fill";
} else {
$class = null;
}
?>
<div class="col-sm-4 col-md-3 col-xs-6">
<div class="thumbnail">
<img src="<?= $value ?>" class="img-thumbnail">
<p style="margin-top: 4px;margin-bottom: 0;">
<a href="admin/products/images/make-cover.html?id=<?= $product->product_id
?>&image=<?= $product->image_names[$key] ?>" class="btn btn-primary btn-xs smooth-
submit make-cover <?= $class ?>"><i class="fa fa-image"></i></a>
<a href="admin/products/images/delete.html?id=<?= $product->product_id ?
>&image=<?= $product->image_names[$key] ?>" class="btn btn-danger btn-xs smooth-
submit delete-img" data-confirm="Sure to delete the image."><i class="fa fa-trash"></i></a>
120
</p>
</div>
</div>
<?php endforeach; ?>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<label class="pull-left btn-fill btn btn-success" for="upload-img">Upload New
<form class="hidden smooth-submit" method="POST"
action="admin/products/images/upload" id="upload-img-form">
<input type="hidden" name="id" value="<?= $product->product_id ?>" >
<input type="file" name="images[]" multiple="" accept="image/jpeg, image/png"
class="hidden" id="upload-img">
</form>
</label>
<button data-dismiss="modal" class="btn btn-info btn-fill">Close</button>
</div>

CHAPTER- 7
IMPLEMENTATION RESULTS

121
HomePage:

New Account:

Login:

122
Account Success:

Products:
123
Store:

Shopping Cart:

124
Checkout:

WISHLIST:

125
Order Information:

Product Returns:

126
Site Map:

My WishList:
127
Product Comperison:

128
Admin Login:

DashBoard:

Admin ADD Orders:

129
Recent ActivityCATOGARY By Admin:

SEARCH ADMIN
130
CUSTOMERS ADMIN

131
CHAPTER- 8
132
SYSTEM TESTING
Once source code has been generated, software must be tested to uncover (and correct) as
many errors as possible before delivery to customer. Our goal is to design a series of test cases
that have a high likelihood of finding errors. To uncover the errors software techniques are
used. These techniques provide

systematic guidance for designing test that

 Exercise the internal logic of software components, and

 Exercise the input and output domains of the program to uncover errors In
program function, behavior and performance.
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.There are different levels during the process of testing. In this chapter, a brief
description is provided about these levels.Levels of testing include different methodologies
that can be used while conducting software testing. The main levels of software testing are:

 Functional Testing

 Non-functional Testing

8.1 Functional Testing

This is a type of black-box testing that is based on the specifications of the software that is to
be tested. The application is tested by providing input and then the results are examined that
need toconform to the functionality it was intended for. Functional testing of a software is
conducted on a complete, integrated system to evaluate the system's compliance with its
specified requirements.

There are five steps that are involved while testing an application for functionality.

Steps Description

133
I The determination of the functionality that the intended application is meant to perform.

II The creation of test data based on the specifications of the application.

III The output based on the test data and the specifications of the application.

IV The writing of test scenarios and the execution of test cases.

V The comparison of actual and expected results based on the executed test cases.

An effective testing practice will see the above steps applied to the testing policies of every
organization and hence it will make sure that the organization maintains the strictest of
standards when it comes to software quality.

8.2 Unit Testing

This type of testing is performed by developers before the setup is handed over to the testing
team to formally execute the test cases. Unit testing is performed by the respective
developers on the individual units of source code assigned areas. The developers use test data
that is different from the test data of the quality assurance team.The goal of unit testing is to
isolate each part of the program and show that individual parts are correct in terms of
requirements and functionality.

8.3 Integration Testing

Integration testing is defined as the testing of combined parts of an application to determine


if they function correctly. Integration testing can be done in two ways: Bottom-up integration
testing and Top-down integration testing.

S.N. Integration Testing Method

134
1
Bottom-up integration

This testing begins with unit testing, followed by tests of progressively higher-level
combinations of units called modules or builds.

2
Top-down integration

In this testing, the highest-level modules are tested first and progressively, lower-level
modules are tested thereafter.

In a comprehensive software development environment, bottom-up testing is usually done


first, followed by top-down testing. The process concludes with multiple tests of the complete
application, preferably in scenarios designed to mimic actual situations.

8.4 Regression Testing

Whenever a change in a software application is made, it is quite possible that other areas
within the application have been affected by this change. Regression testing is performed to
verify that a fixed bug hasn't resulted in another functionality or business rule violation. The
intent of regression testing is to ensure that a change, such as a bug fix should not result in
another fault being uncovered in the application.

Regression testing is important because of the following reasons:

 Minimize the gaps in testing when an application with changes made has to be tested.

 Testing the new changes to verify that the changes made did not affect any other area
of the application.

 Mitigates risks when regression testing is performed on the application.

 Test coverage is increased without compromising timelines.

 Increase speed to market the product.

8.5 Acceptance Testing


This is arguably the most important type of testing, as it is conducted by the Quality
Assurance Team who will gauge whether the application meets the intended specifications

135
and satisfies the client’s requirement. The QA team will have a set of pre-written scenarios
and test cases that will be used to test the application.More ideas will be shared about the
application and more tests can be performed on it to gauge its accuracy and the reasons why
the project was initiated. Acceptance tests are not only intended to point out simple spelling
mistakes, cosmetic errors, or interface gaps, but also to point out any bugs in the application
that will result in system crashes or major errors in the application.

By performing acceptance tests on an application, the testing team will reduce how the
application will perform in production. There are also legal and contractual requirements for
acceptance of the system.

8.6 Alpha Testing


This test is the first stage of testing and will be performed amongst the teams (developer and
QA teams). Unit testing, integration testing and system testing when combined together is
known as alpha testing. During this phase, the following aspects will be tested in the
application:

 Spelling Mistakes

 Broken Links

 Cloudy Directions

 The Application will be tested on machines with the lowest specification to test
loading times and any latency problems.

8.7 Beta Testing


This test is performed after alpha testing has been successfully performed. In beta testing, a
sample of the intended audience tests the application. Beta testing is also known as pre-
release testing. Beta test versions of software are ideally distributed to a wide audience on
the Web, partly to give the program a "real-world" test and partly to provide a preview of the
next release. In this phase, the audience will be testing the following:

 Users will install, run the application and send their feedback to the project team.

 Typographical errors, confusing application flow, and even crashes.

 Getting the feedback, the project team can fix the problems before releasing the
software to the actual users.

 The more issues you fix that solve real user problems, the higher the quality of your
application will be.
136
 Having a higher-quality application when you release it to the general public will
increase customer satisfaction.

CHAPTER- 9
CONCLUSION

The project entitled Electronic Items Shopping 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
137
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 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.

CHAPTER- 10
FUTURE ENHANCEMENT

Although the online buyer cannot return an item as quickly in some situations as the buyer
who can walk in and out of a Wal-Mart or Sears when the parking lot isn't crowded or there is
no line at the returns desk, there are many other reasons to buy online.

138
Sellers of low-mass products - small books, DVDs, lightweight clothing have a marked edge
in sales because shipping is relatively low in cost. The seller of these items doesn't need to
pay the overhead of a store, staff, parking lot, utilities, etc. They pay only storage and
shipping which is becoming increasingly automated.
Although people are rightfully afraid of bankcard fraud, I believe all card services will
continue to improve security and improve buyer dispute processes.
Fraudulent emails sent to credit card holders (and all business accounts for that matter) will
continue to be a big problem. As both merchants and shoppers become aware of these
fraudulent practices it will be more difficult to exploit people with business accounts at
PayPal or Amazon.
There is a probability, partly because of the price of fuel, that delivery services will
consolidate to some extent in the future so that you will receive one or two regular deliveries
per day of all goods you have purchased - including groceries - along with mail and
newspaper, etc.
Each person may also have a receiving station service in the future whereby the shopper picks
up everything from one large, secured lockbox. If a delivery is very large or has accumulated
over days, a key would be left with directions to a nearby, larger overflow box. Security,
insurance, and energy costs would all be cut by these changes.
Grocers have experimented with many forms of advertising, delivery, billing and credit. All of
these ideas are improved with online transactions. Shopping from several grocery chains will
be easier when you get free delivery and easy to find price comparisons. You will even be able
to subscribe to discount announcements of various products.

CHAPTER- 11
REFRENCES

1. An Introduction to Database System

2. Software Engineering

3. HTML, PHP AND SQL

139
4. Tutorial Points

5. www.w3schools.com

140

Das könnte Ihnen auch gefallen