You are on page 1of 88

Online Shopping Website

(YOUR STORE)
Minor Project Report Submitted for the partial fulfillment of
Bachelor of Computer Application’s.
(3 year Regular Course)

Under Supervision of: Submitted By:

Mrs.Ankita Chpora Sampada Verma


(Professor) (04050402020)
BCA 3rd Year 2nd shift

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
CERTIFICATE

I hereby certify that the work which is being presented in the project named YOUR
STORE by me in partial fulfillment of requirements for the award of degree of BCA
submitted to Jagan Institute of Management Studies,
Rohini Sector - 5 is my own work carried out in the session 2021 under the
supervision of Mrs. Ankita Chopra. The matter presented in this has not been
submitted by me in any other University/Institute for the award of BCA degree.

Sampada Verma (04050402020)

This is to certify that the above statement made by Sampada Verma is correct and
the matter embodied in this project work has not been submitted earlier for the award
of any degree to the best of my knowledge.

Mrs.Ankita Chopra

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
ACKNOWLEDGEMENT

This project is an acknowledgement to the intensity drive and technical competence


of many people who have contributed to it.
I express my heartiest gratitude and deepest thanks to project guide
Mrs. Ankita Chopra for her proper guidance, suggestions and helping us in
completing the project.
I am very grateful to the staff and faculty members of the college.
I am highly grateful to my parents who have been the source of money and
encouragement during the course of my work.
I give special thanks to my friends for their unending support as they helped advised
and encouraged me for making this project interesting and successful one and my
special thanks to the almighty GOD.

Thanking You
Sampada Verma (04050402020)

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
TABLE OF CONTENTS

S NO. NAME PAGE NO.

1 INTRODUCTION 1-5

1.1 PROJECT OVERVIEW 1


1.2 MODULES 2-5

2 SOFTWARE REQUIREMENT 7-11


PURPOSE
2.1 7
2.2 SOFTWARE REQUIREMENT ANALYSIS OTHER
8
2.3 NON FUNCTIONAL REQUIREMENT SECURITY
9
2.4 USABILITY
9-10
10-11
3 SYSTEM DESIGN 12-25

3.1 WEBSITE DESIGN 12

3.2 WEBSITE DESIGN CONSIDERATION 12-14


3.3 DESIGN PROCESS 14
3.4 UML DIAGRAM/USECASE DIAGRAM 15-16
3.5 FLOW CHART 17-18
3.6 19-20
ER DIAGRAM
3.7 21-23
DFD DIAGRAM
3.8
NORMALIZATION 23

4 4.1 CODING PHASE PICTURES 26-64


4.2 65-72

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
5 TESTING PHASE 73-112
TESTING
5.1 73
5.2 TYPES OF TESTING
73
5.3 TIPS TO ENHANCES OUR WEBSITE
5.4 74
TESTING TECHNIQUES
75-76
6 IMPLEMENTATION PHASE 77-79

6.1 INTEGRATED DEVELOPMENT ENVIRONMENT 77-78


6.2 HOW TO IMPLEMENT 78-79

7 FUTURE EXPANSION 80

8 CONCLUSION 81

9 REFERENCES 82

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
LIST OF TABLES

TABLE NO. NAME PAGE NO.

1 SOFTWARE INTERFACE 8

2 HARDWARE INTERFACE 8

3 DATABASE TABLE 1 24

4 DATABASE TABLE 2 24

5 DATABASE TABLE 3 25

6 DATABASE TABLE 4 25

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
LIST OF FIGURES

LIST OF ABBREVIATIONS
S.NO DESCRIPTION OF FIGURE/DIAGRAM PAGE.NO

1. UML/USE CASE DIAGRAM 16

2. FLOW CHART DIAGRAM 18

3. ER DIAGRAM 20

DATA FLOW DIAGRAM DFD 21-22

4. LEVEL 0 DIAGRAM 21

5. DFD LEVEL 1 DIAGRAM 22


6. DFD LEVEL 2 DIAGRAM 22

ER DIAGRAM- EntityRelationshipDiagram

DFD-DataFlow Diagram

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter-1 SUMMARY
YOUR STORE is online shopping website that features E-commerce Website.
Visitors can see the available features such as browse products, view details of
products (device,colour and cost), and view other static contents of my site.
Registered user can view all available features and in addition to this they can
purchase the products by adding them into shopping cart. Admin can manage all the
data and orders from the back-end (admin side).
I understand the needs and concerns of Individuals and provide them a common
platform for realizing maximum benefits from YOUR STORE experience by
making it easier, faster,secure and more accurate to find Mobiles for shopping and
have control through user interactivity and features that can help them identify,filter
and contact potential users.
I have added features like offers and discounts to attract more customers on my site.I
update my website on regular interval of time with more content. There are different
payment modes which helps the customers for flexible money transaction. They can
choose any suitable mode to buy their wish-list products which they added to
shopping cart.

1.1 Project Objective

Today the Internet and its boom hae created a new economic scenario that not only
stresses on the classical concept of “The Product” but also on the modern concept
of “The Service”. It is this level of service that dictates whether a commercial
venture will succeed or not in market. To provide a high accessibility of service we
will design the online shopping website, So that potential customers need not go to
a physical shop to buy products or services. Easy interaction between the customer
and the seller are more convincing.

There are several Objectie of this websites are follows:-

My website gives all the information about the e-shopping to provide best price
to the customer.
Site provides the facility to the customers who want to shop online due to lack of
time.
Site is providing the complete details the product and related information about
the product like Cost, device, Colour etc.
With the help of my site you can sae the time and money also.
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
It provides the remote shopping by Cash,upi,Debit card etc.

1.2 Modules

A module is a small part of our project. This plays a very important role in the project
and in coding concept. In software engineering concept we treat it as a small part of
system but whereas in programming language it is as small part of program, which
we also called as function in some cases which constitute the main program.
Importance of module in any software development side is we can easily understand
what the system we are developing and what are its main uses.
Description of modules :-

Homepage
Signup
Login
Filter/Category
Shopping Cart
Wishlist
Checkout
Shipping
Delivery
Payment

1. Homepage
Homepage is the first page of the website. User first interact with this page and start
exploring the whole website .
Homepage contains
All the latest & trending products

• Signup
• Login
• Offers
• Filter

2. Signup
This section of website allows user to register as user of website and allows them to
purchase products as well as explore all the products.
• Customer make their account
• Adding info about them like
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
• Email
• Password
• Phone number

3. Login
Login is done by those customers who have signed up or are already registered
themselves and want to login again. Their account is running with the website.They
can login ample number of times without any restrictions.

Customers use their email & password to login to the website.

4. Filter
Filter feature allows user to filter the products as their need and want and different
choices as per their demands. Users can filter using a Brand bar located in of the
homepage. User add filters to sort the brand they wish to buy from my site.

Its contains :-

• Filters (brands)
• Sorting

5. Shopping Cart
Shopping Cart feature allows registered users to add the items they like or they want
to purchase in a virtual cart. They can add and delete from the shopping cart. Cart
will give customer the sum amount they liked. Customer can delete or add more
items accordingly. After adding to cart customer can proceed purchasing from there.

6. Wishlist
Wishlist features allows to registered users to add the items for future purchase they
want to buy in future.

7. Checkout
Checkout is that section where the customer can proceed to purchase from different
suitable payment modes. Checkout section contains many security features that are
as follows:-

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
• One-Page Checkout
• Shipping to multiple addresses in one order
• Checkout without account/Guest Checkout
• Shopping Cart with tax and shipping estimates

8. Payment
Payment is that section which allows users to make their online payment through
different payment modes like

• Credit/Debit
• BHIM UPI
• Net Banking
• E-wallets
• Saved Credit/Debit Card method form off-line payments
• Accept Checks/Money Orders
• COD(cash on delivery).

9. Shipping
• Integrated for real-time shipping rates
• Shipping to multiple addresses in one order
• On-site order tracking from customer accounts
• Ability to specify allowed destination countries per method
• Flat rate shipping per item
• Free Shipping
• Accept Purchase Orders

10. Delivery
Delivery of product is the final and the last step in which user receive its product on
door step.Delivery contains details of the customer address with name and crucial
information needed for product delivery to the correct destination.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter-2 SOFTWARE REQUIREMENTS
2.1 Purpose
Purpose for making e-commerce website is that, making offline Stores available
Online that will Increase the customers for the sell and also help in managing
inventory of other benefits. It makes more convenient for the people to shop. The
website deals with :--
• Increase customers
• Doorstep service to customers
• Inventory managing becomes easy
• Wide variety for customers
• Different payments modes

The target people can experience online shopping with ease on my site. With the
help of my website anyone can search the product and buy online without wasting
their valuable time.
If anyone needs any detail against their query or how to make payment etc my
website will provide point to point information.

Hardware/Software Requirement

o Hard disk: - AS per your data (minimum 59mb)


o RAM: - more then 128mb
o Processor: - any o
o Graphics – Any integrated. o
o Web servers- Apache 2.x/Nglnx/ Microsoft IIS
o PHP-5.6+
o MySQL5.0 must be installed

2.2 Software Requirement Analysis

PHP
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open
source general-purpose scripting language that is especially suited for web
development and can be embedded into HTML. The best things in using PHP are
that it is extremely simple for a newcomer, but offers many advanced features for a

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
professional programmer. Don't be afraid reading the long list of PHP features. You
can jump in, in a short time, and start writing simple scripts in a few hours.

2.2.1 Software Interface

Operating System Windows/linux/mac


Database MySQL
Programming language PHP
Internet Requirements Yes

Prestashop Version 1.7.0

Table 1

2.2.2 Hardware Interface

Processor RAM Disk Space

Intel P4 or equivalent 512 MB 2 GB

Intel i5 4GB 500 GB

Server Environment 2GB As per the size of the required data base

Table 2

2.3 Other Non-Functional Requirements

Ø Performance Requirements
All operations and queries shall complete or present errors within minutes of their
invocation.
Ø Security Requirements
Administrator of the site come online website can manage project and user. Viruses
and hacking are threatening e-commerce, thus requiring the network to provide a
security 14 solution. Including encryption, signature scheme, distributed security
management, access control, firewall, secure web servers, anti-virus protection. The

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
security of network system is divided into data security, information security and
network security.

2.4 Security

2.4.1 Data Security


The damage of the hard drive is one of threat for data security. A hard drive physical
damage means loss of data. Loss of equipment operation, storage media failure,
operating environment and the human destruction, these can be caused by hard disk
drives affected. In order to ensure data security, redundant arrays of inexpensive
disks, hierarchical storage management can solve it.
Redundant Arrays of Inexpensive Disks is called RAID. It uses more than one type,
capacity, interface or achieve the data read speed and security. The website need to
work 24x7 with handling of capital flow, so that it is very important to secure the
data accurately and safely. If the data is lost all cases information will be lost and
that becomes huge loss for user.
Hierarchical storage devices to work together to form a coordinated storage system,
the system in the online storage and offline storage devices for dynamic management
of data, make access to data stored in the high frequency of high-performance data
speed in line with higher performance storage devices, and access to data stored in
the low frequency of cheaper offline storage devices.

2.4.2 Information Security


To prevent unregistered users to bypass the registration for register their case directly
into the application system, the website system uses session object to register
verification. In a website system whose source code will not be passed to the client
browser, thus avoiding the
abbreviation of the source of plagiarism by other to enhance the security of the
program. In addition, the people who operate the computer are one of the computer
are one biggest potential threat to information security. That is to say, the
administrator can't give out or rest password, change any data without verifying who
the information is for, it would let anyone easily to get access to the system.

2.4.3 Network Security


Network security is a complicated subject , however, it is becoming more and more
important as people spend more and more time connected. In a web site, network
security starts from authenticating the user with a user name and password, for

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
authentication, users have to use password with strongly of security, and also need
to change it usually. In the code, it should be also prepared for certain attack type
such as SQL injection attack. And for instance, automatic of user id in the firewall
is a good way to prevent attacks. The web site is a small or medium business. It has
a fairly strong firewall to prevent malicious attacks from hacking or some spamming
and protect computer networks from attack and subsequent instruction by restricting
the network traffic which can pass through. The system must use an optional
network analyzer or network monitor. This type of electronic also be tested well for
weakness and holes that hackers and intrudes could use.

2.5 Usability
Usability is crucial in website development. Because whether you are doing online
store or online application, the page for users to make it easy and fun to use is key;
efficient to use, easy to use and consistent interface can help enhance usability.
Ø Efficient to use
Most users just simply leave the site and browse, so information properties like
frequently active on our site that module can help the client to notice it, if the online
property site has property pages, the client will be sure to see them. But if it lacks of
adequate information page for property, or even if it is difficult to quick browser.If
the system has well-structured user manuals, information error message and help
facilities, it can be easy to use for client.
Ø Backup
Backup is useful in recovering your data in the event of an electronic disaster like
hardware failure or a break-in that changes or otherwise damage your data. It copies
of all the important computer files kept in another location. So if database is quite
large that has to extract file first. That means storage is the base of a backup system.
Ø Extensible
The implementation of a website takes into consideration future growth, the
extensible of the new network system designed to adapt to the user the ability to
future development of enterprises. Such as application extensible, application
functionality in the network configuration on the one hand to fully meet current and
foreseeable future application with a period of time, on the other hand can easily
extend the functionality can be flexibly added and functional module.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter 3 - SYSTEM DESIGN

3.1 Website Design


The system objectives outlined during the feasibility study serve as the basic from
which the work of system design is initiated. Much of the activities involved at this
stage is of technical nature requiring in a certain degree of experience in designing
website, sound knowledge of computer related technology and through
understanding of computers available in the market and the various facilities
provided by the admin. Nevertheless, a website cannot be designed in the isolation
without the active involvement of user.
The user has a vital role to play at this stage too. As we know that information
collected during feasibility study, the level of detailed study will vary and the
website design page will also vary in the amount of investigation that still needs to
be done. This investigation may be from a separate stage between feasibility study
and computer design. Designing a new website is a creative process, which calls for
logical as well as lateral thinking the logical process involves website moves
towards the end product keeping in mind capabilities of the personal and the
equipment at each decision making step. Lateral thought implies encompassing of
ideas beyond the usual functions and equipment. This is to ensure that no efforts are
being made to fit previous solutions into new solutions.

3.2.1 Design Objectives


The primary objective of the design of course is to deliver the requirements as
specified in the feasibility reports. In general the following design objectives should
be kept in mind.
Ø Practicality
The website must be stable and can be operated by people with average Knowledge

Ø Efficiency
This involves accuracy, time-lines and comprehensives to the website output.

Ø Cost
It is desirable to aim for a website with a minimum cost subject to the condition that
it must satisfy all the requirements.

Ø Flexibility
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
The website should be modifiable depending on the changing needs of the user. Such
modifications should not entail extensive reconstructing or recreation of software. It
should also be portable to different computer websites.
Ø Security
This is very important aspect of the design and should cover areas of hardware
reliability, fall back procedures, physical security of data and provisions for
detection of fraud and abuse.
Website design involves first logical design and then physical construction of the
website. The logical design describes the structure and characteristics of features,
like the outputs, inputs, files, database and procedures. The physical construction
which follows the logical design, procedures actual program software

3.2.2 Major Website Design Activities


Several development activities are carried out during structured design. They are
database design, implementation planning, website test preparation, website
interface specifications and user documentation.
§ Database Design:
This activity deals with the design of the physical database. A key is to determine
how the access paths are to be implemented.
§ Program Design:
In conjunction with database design is a decision on the programming language to
be used and the flowcharts, coding and debugging procedure prior to conversion.
The operating website limits the programming languages that will run of the website.
Website and program test preparation. Each aspect of the website has a separate list
requirement. Website testing is done after all programming and testing completed
the test on website and program test requirements become a part of design
specifications a prerequisite to implementation.

3.3 Design Process


The computer website design processes an exercise of specifying how, the website
will work. It is an iterative process, which is based on what the website will do as
shown in the feasibility report. Mainly, following five parts have been included in
the website design process.

§ Output Design:
The starting point of the design process is the proper knowledge of website
requirements which will normally be converted in terms of output.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
§ Input Design:
Once the output requirements have been finalized, the next step is to find out what
data need to be made available to the website to produce the desired outputs. The
basic document in which these data are available need to be identified .if necessary,
these documents may have to be revised or new documents may have to be
introduced.
§ File Design:
Once the input data is captured in the website in the website, these may to be
preserved either for a short or long period. These data will generally be stored in
files in a logical manager. The designer will have to devise the techniques of storing
and retrieving data from these files.

3.4 Unified Modelling Language (UML) Diagrams / Use case Diagrams


UML diagram is the international standard notation for object-oriented analysis and
design. The object management group defines it. The heart of object-oriented
problem solving is the construction of model. The model abstracts the essential
details of the underlying problem from usually complicated real world. Several
modelling tools are wrapped under the heading of the ump, which stands for unified
modelling language

The UML Diagram is a language for

• Visualizing
• Specifying
• Constructing
• Documenting

Basic Building Blocks of the UML Diagram:


The vocabulary of Use Case encompasses three kinds of building blocks:

§ Things
§ Relationships
§ Diagrams
Things are the abstraction that are first-class citizens in a model. Relationships tie
these things together.
Diagrams group the interesting collection of things.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
3.4.1 USE CASE OF YOUR STORE

Figure 1

3.5 Flow Chart


A flowchart is a type of diagram that represents an algorithm, work flow or process.
The flowchart shows the steps as boxes of various kinds, and their order by
connecting the boxes with arrows. This diagrammatic representation illustrates a
solution model to a given problem. Flowcharts are used in analyzing, designing,
documenting or managing a process or program in various fields.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Flowcharts are used in designing and documenting simple processes or programs.
Like other types of diagrams, they help visualize what is going on and thereby help
understand a process, and perhaps also find less-obvious features within the process,
like flaws and bottlenecks. There are different types of flowcharts: each type has its
own set of boxes and notations.

3.5.1 FLOW CHART OF YOUR STORE

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Figure 2

3.6 ER Diagrams

An E-R Diagram stand for Entity Relation model is a tool that is commonly used to
translate different views of data among mangers, users and programmers to fit into
a common framework, define data processing and constraint requirements to help
us meet the different views and helps to implement the database .The E-R model
forms the basis of E-R diagram that represent the conceptual database as viewed by
the end user. These diagrams depict the E-R model three main components:
• Entities
• Attributes
• Relationships

1. Entities
An entity at the E-R modeling level actually refers to the entity set not to a single
entity occurrence. In other words the word “entity” in the E-R model corresponds to
a table and not to a row in the entity occurrence. An entity is represented by a
rectangle containing the entity occurrence. An entity is represented by a rectangle
containing the entities name. IT is denoted by rectangle by specifying the table name
in it.

2. Attributes
Attribute are represented by ovals and are connected to the entity with a line. Each
oval contain the name of the attribute it represents.

3. Relationship
A relationship is an associated between entities. Each relation is identified so that its
description of the relation. Identify the name is an active verb.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
3.6.1 ER DIAGRAM of YOUR STORE

Figure 3

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
3.7.1 Data Flow Diagrams (DFD)

A graphical tool used to describe and analyze the moment of data through a system
manual or automated including the process, store of data and delays in the system.
Data flow Diagrams are the central tool and the basis from which other components
are developed. The transformation of data from input to output, through processes,
may be describe logically and independently of the physical components associated
with the system. The DFD is also known as a data flow graph or a bubble chart.

Context Diagram (Level 0 DFD)


The top – level diagram if often called a context diagram. IT contains a single
process, but it plays a very important role in studying the current system. The context
diagram defines the system that will be studied in the sense that it determines will
not be a part of the system study. It represents the entire software elements as a single
bubble with input and output data indicated by incoming and outgoing arrows
respectively.
3.7.2 DFD LEVEL 0 of YOUR STORE

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Figure 4

3.7.2 DFD LEVEL 1

Figure 5

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
3.7.3 DFD LEVEL 2

Figure 6

Data flow diagrams are of two types:


1. Physical DFD:

Structured analysis states that the current should be first understand correctly. The
physical DFD is the model of the current system and is used to ensure the current
system has been clearly understood. Physical DFD shows actual devices,
departments, and people etc., involved in the current system.

2. Logical DFD:

Logical DFD are the model of the proposed system. They clearly should show the
requirements on which the new system should be built. Later during design activity
this is taken as the basis for drawing the system’s structure charts.

3.8 Normalization
In relation to database design the process of organizing data to minimize redundancy.
Normalization usually involves dividing a database into two or more tables and
defining relation among tables. The objective is to isolate data so addition, deletion
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
and modification of a field can be made in just one table and they propagated through
rest of the database is defined relations

There are three main normal forms each with increasing level of normalization.

• First Normal form (1NF) :-Each filed in table contain different information. For
example in an employee list each table would contain only one birth data field.

• Second Normal form (2NF) :- Each field in table that is not determining of the
content of another field must itself are function of the other fields in the table.

• Third Normal form (3NF):- No duplicate information is permitted so, for example
if two tables both require birth date fields the birth date information would be spread
in to separate table, and two another tables would then access the birth date
information via an index filed in the birth date table. Any changes in birth date would
automatically reflect in all tables that link to that birth date.

DATABASE TABLES

TABLE 3

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
TABLE 4

TABLE 5

TABLE 6

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter- 4 CODING

HOME PAGE

<?php ob_start();
include ('header.php');
?>

<?php

include ('Template/_banner-area.php'); include ('Template/_top-


sale.php'); include ('Template/_special-price.php'); include
('Template/_banner-ads.php'); include ('Template/_new-phones.php');
include ('Template/_blogs.php');
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
?>

<?php
include ('footer.php');
?>

HEADER

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouR StorE</title>

<!-- Bootstrap CDN -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q
9Ifjh" crossorigin="anonymous">

<!-- Owl-carousel CDN -->


<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carous
el.min.css"
integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw="
crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.
default.min.css" integrity="sha256-
kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw="
crossorigin="anonymous" />

<!-- font awesome icons -->


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css"
integrity="sha256h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
crossorigin="anonymous" />
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<!-- Custom CSS file -->
<link rel="stylesheet" href="style.css">

<?php
require ('functions.php');
?>

</head>
<body>

<!-- start #header -->


<header id="header">
<div class="strip d-flex justify-content-between px-4 py-1 bg-light">
<p class="font-rale font-size-12 text-black-50 m-0">Welcome to YouR
StorE</p> <div class="font-rale font-size-14">
<a href="login.php" class="px-3 border-right border-left text-
dark">Login</a>
<a href="cart.php" class="px-3 border-right text-dark">Whishlist</a>
<a href="check.php" class="px-3 border-right text-dark">checkout</a>
</div>
</div>

<!--navigation -->
<nav class="navbar navbar-expand-lg navbar-dark color-second-bg">
<a class="navbar-brand" href="#">YouR StorE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" ariacontrols="navbarNav" aria-expanded="false" aria-
label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav m-auto font-rubik">
<li class="nav-item active">
<a class="nav-link" href="index.php">On Sale</a>
</li>
<li class="nav-item">
<a class="nav-link" href="_top-sale.php">New In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.php">Products </a>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
</li>
<li class="nav-item">
<a class="nav-link" href="footer.php">Blog</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Category <i class="fas fa-chevron-
down"></i></a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#">Coming Soon</a>
</li>
</ul>
<form action="#" class="font-size-14 font-rale">
<a href="cart.php" class="py-2 rounded-pill color-primary-bg">
<span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-
cart"></i></span>
<span class="px-3 py-2 rounded-pill text-dark bg-light"><?php echo
count($product->getData('cart')); ?></span>
</a>
</form>
</div>
</nav>
<!-- !navigation -->

</header>
<!-- header -->

CART

<?php
ob_start();
include ('header.php');
?>

<?php

count($product->getData('cart')) ? include ('Template/_cart-template.php') :


include ('Template/notFound/_cart_notFound.php');

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
count($product->getData('wishlist')) ? include
('Template/_wishilist_template.php') : include
('Template/notFound/_wishlist_notFound.php');

include ('Template/_new-phones.php');

?>

<?php
include ('footer.php');
?>

<?php

class Cart {
public $db = null;

public function __construct(DBController $db)


{
if (!isset($db->con)) return null;
$this->db = $db;
}
public function insertIntoCart($params = null, $table = "cart"){ if ($this-
>db->con != null){ if ($params != null){
// "Insert into cart(user_id) values (0)"
// get table columns
$columns = implode(',', array_keys($params));

$values = implode(',' , array_values($params));


$query_string = sprintf("INSERT INTO %s(%s) VALUES(%s)", $table,
$columns, $values);

$result = $this->db->con->query($query_string); return


$result;
}
}
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}

public function addToCart($userid, $itemid){ if (isset($userid) &&


isset($itemid)){
$params = array(
"user_id" => $userid,
"item_id" => $itemid
);

$result = $this->insertIntoCart($params); if ($result){

header("Location: " . $_SERVER['PHP_SELF']);


}
}
}

public function deleteCart($item_id = null, $table = 'cart'){ if($item_id !=


null){
$result = $this->db->con->query("DELETE FROM {$table} WHERE
item_id={$item_id}"); if($result){
header("Location:" . $_SERVER['PHP_SELF']);
}
return $result;
}
}
public function getSum($arr){ if(isset($arr)){ $sum = 0;
foreach ($arr as $item){ $sum += floatval($item[0]);
}
return sprintf('%.2f' , $sum);
}
}

public function getCartId($cartArray = null, $key = "item_id"){ if


($cartArray != null){
$cart_id = array_map(function ($value) use($key){ return
$value[$key];
}, $cartArray); return $cart_id;
}
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}

public function saveForLater($item_id = null, $saveTable = "wishlist",


$fromTable = "cart"){ if ($item_id != null){
$query = "INSERT INTO {$saveTable} SELECT * FROM {$fromTable}
WHERE item_id={$item_id};";
$query .= "DELETE FROM {$fromTable} WHERE item_id={$item_id};";

$result = $this->db->con->multi_query($query);

if($result){
header("Location :" . $_SERVER['PHP_SELF']);
}
return $result;
}
}

<!-- shopping cart -->


<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
if (isset($_POST['delete-cart-submit'])){
$deletedrecord = $Cart->deleteCart($_POST['item_id']);
}

if (isset($_POST['wishlist-submit'])){ $Cart-
>saveForLater($_POST['item_id']);
}
}
?>

<section id="cart" class="py-3 mb-5">


<div class="container-fluid w-75">
<h5 class="font-baloo font-size-20">Shopping Cart</h5>

<!-- cart items -->


Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<div class="row">
<div class="col-sm-9">
<?php
foreach ($product->getData('cart') as $item) : $cart =
$product->getProduct($item['item_id']); $subTotal[] =
array_map(function ($item){
?>
<!-- cart item -->
<div class="row border-top py-3 mt-3">
<div class="col-sm-2">
<img src="<?php echo $item['item_image'] ??
"./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-
fluid">
</div>
<div class="col-sm-8">
<h5 class="font-baloo font-size-20"><?php echo
$item['item_name'] ?? "Unknown"; ?></h5>
<small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>
<!-- product rating -->
<div class="d-flex">
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<a href="#" class="px-2 font-rale font-size-14">2,053
ratings</a>
</div>

<div class="qty d-flex pt-2">


<div class="d-flex font-rale w-25">
<button class="qty-up border bg-light" data-id="<?php echo
$item['item_id'] ?? '0'; ?>"><i class="fas faangle-up"></i></button>
<input type="text" data-id="<?php echo $item['item_id'] ?? '0';
?>" class="qty_input border px-2 w-100 bg-light" disabled value="1"
placeholder="1">
<button data-id="<?php echo $item['item_id'] ?? '0'; ?>"
class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
</div>

<form method="post">
<input type="hidden" value="<?php echo $item['item_id'] ??
0; ?>" name="item_id">
<button type="submit" name="delete-cart-submit" class="btn
font-baloo text-danger px-3 borderright">Delete</button>
</form>

<form method="post">
<input type="hidden" value="<?php echo $item['item_id'] ??
0; ?>" name="item_id">
<button type="submit" name="wishlist-submit" class="btn
font-baloo text-danger">Save for Later</button>
</form> </div>

</div>

<div class="col-sm-2 text-right">


<div class="font-size-20 text-danger font-baloo">
₹<span class="product_price" data-id="<?php echo $item['item_id']
?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
</div>
</div>
</div>
<!-- !cart item -->
<?php
return $item['item_price'];
}, $cart); // closing array_map function endforeach;
?>
</div>
\
<div class="col-sm-3">
<div class="sub-total border text-center mt-2">
<h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-
check"></i> Your order is eligible for FREE Delivery.</h6>
<div class="border-top py-4">
<h5 class="font-baloo font-size-20">Subtotal ( <?php echo
isset($subTotal) ? count($subTotal) : 0; ?> item):&nbsp; <span class="text-

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
danger">₹<span class="text-danger" id="deal-price"><?php echo isset($subTotal)
? $Cart>getSum($subTotal) : 0; ?></span> </span> </h5>
<form method="get" action="checkout.php"><button
type="submit" class="btn btn-warning mt-3">Proceed to Buy</button>
</div>
</div>
</div>
</div>
<!-- !cart items -->
</div>
</section>
<!-- ! cart -->

PRODUCT

<?php
$item_id = $_GET['item_id'] ?? 1; foreach ($product->getData() as $item) :
if ($item['item_id'] == $item_id) :
?>
<section id="product" class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="<?php echo $item['item_image'] ?? "./assets/products/1.png"
?>" alt="product" class="img-fluid"> <div class="form-row pt-4 font-
size-16 font-baloo">
<div class="col">
<button type="submit" class="btn btn-danger form-
control">Proceed to Buy</button>
</div>
<div class="col">
<?php
if (in_array($item['item_id'], $Cart->getCartId($product-
>getData('cart')) ?? [])){
echo '<button type="submit" disabled class="btn btn-success
font-size-16 form-control">In the Cart</button>';
}else{
echo '<button type="submit" name="top_sale_submit" class="btn
btn-warning font-size-16 formcontrol">Add to Cart</button>';
}
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
?>
</div>
</div>
</div>
<div class="col-sm-6 py-5">
<h5 class="font-baloo font-size-20"><?php echo $item['item_name'] ??
"Unknown"; ?></h5> <small>by <?php echo $item['item_brand'] ??
"Brand"; ?></small> <div class="d-flex">
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<a href="#" class="px-2 font-rale font-size-14">20,534 ratings |
1000+ answered questions</a>
</div>
<hr class="m-0">

<table class="my-3">
<tr class="font-rale font-size-14"> <td>M.R.P:</td>
<td><strike>₹18000</strike></td>
</tr>
<tr class="font-rale font-size-14"> <td>Deal
Price:</td>
<td class="font-size-20 text-danger">₹<span><?php echo
$item['item_price'] ?? 0; ?></span><small class="text-dark font-size-
12">&nbsp;&nbsp;Inclusive of all taxes</small></td>
</tr>
<tr class="font-rale font-size-14">
<td>You Save:</td>
<td><span class="font-size-16 text-danger">₹1500</span></td>
</tr>
</table>

<!-- #policy -->


<div id="policy">
<div class="d-flex">
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<div class="return text-center mr-5">
<div class="font-size-20 my-2 color-second">
<span class="fas fa-retweet border p-3 rounded-pill"></span>
</div>
<a href="#" class="font-rale font-size-12">10 Days <br>
Replacement</a>
</div>
<div class="return text-center mr-5">
<div class="font-size-20 my-2 color-second">
<span class="fas fa-truck border p-3 rounded-pill"></span>
</div>
<a href="#" class="font-rale font-size-12">YouR StorE
<br>Deliverd</a>
</div>
<div class="return text-center mr-5">
<div class="font-size-20 my-2 color-second">
<span class="fas fa-check-double border p-3 rounded-
pill"></span>
</div>
<a href="#" class="font-rale font-size-12">1 Year
<br>Warranty</a>
</div>
</div>
</div>
<hr>

<div id="order-details" class="font-rale d-flex flex-column text-dark">


<small>Delivery by : Nov 1 - Nov 10</small>
<small>Sold by <a href="#">YouR StorE </a>(4.5 out of 5 | 18,198
ratings)</small>
<small><i class="fas fa-map-marker-alt color-
primary"></i>&nbsp;&nbsp;Deliver to Customer - 110094</small>
</div>

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

<div class="color my-3">

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<div class="d-flex justify-content-between">
<h6 class="font-baloo">Color:</h6>
<div class="p-2 color-yellow-bg rounded-circle"><button
class="btn font-size-14"></button></div>
<div class="p-2 color-primary-bg rounded-circle"><button
class="btn font-size-14"></button></div> <div class="p-2
color-second-bg rounded-circle"><button class="btn font-size-
14"></button></div>
</div>
</div>

</div>
<div class="col-6">
<div class="qty d-flex">
<h6 class="font-baloo">Qty</h6>
<div class="px-4 d-flex font-rale">
<button class="qty-up border bg-light" data-id="pro1"><i
class="fas fa-angle-up"></i></button> <input type="text"
data-id="pro1" class="qty_input border px-2 w-50 bg-light" disabled value="1"
placeholder="1">
<button data-id="pro1" class="qty-down border bg-light"><i
class="fas fa-angle-down"></i></button>
</div>
</div>
</div>
</div>

<div class="size my-3">


<h6 class="font-baloo">Size :</h6>
<div class="d-flex justify-content-between w-75">
<div class="font-rubik border p-2">
<button class="btn p-0 font-size-14">4GB RAM</button>
</div>
<div class="font-rubik border p-2">
<button class="btn p-0 font-size-14">6GB RAM</button>
</div>
<div class="font-rubik border p-2">
<button class="btn p-0 font-size-14">8GB RAM</button>
</div>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
</div>
</div>

</div>

<div class="col-12">
<h6 class="font-rubik">Product Description</h6>
<hr>
<p class="font-rale font-size-14">Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellat inventore vero numquam?</p>
<p class="font-rale font-size-14">Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellat inventore vero numquam error est ipsa?</p>
</div>
</div>
</div>
</section>
<!-- !product -->
<?php
endif;
endforeach;
?>
<?php

class Product
{
public $db = null;

public function __construct(DBController $db)


{
if (!isset($db->con)) return null;
$this->db = $db;
}

public function getData($table = 'product'){


$result = $this->db->con->query("SELECT * FROM {$table}");

$resultArray = array();
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
while ($item = mysqli_fetch_array($result, MYSQLI_ASSOC)){
$resultArray[] = $item;
}

return $resultArray;
}

public function getProduct($item_id = null, $table= 'product'){ if


(isset($item_id)){
$result = $this->db->con->query("SELECT * FROM {$table} WHERE
item_id={$item_id}");

$resultArray = array();

while ($item = mysqli_fetch_array($result, MYSQLI_ASSOC)){


$resultArray[] = $item;
}

return $resultArray;
}
}

CHECKOUT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkout</title>
<style> .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap;
flex-wrap: wrap; margin: 0 -16px;
}

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
.col-25 { -ms-flex: 25%; flex: 25%;
}

.col-50 { -ms-flex: 50%; flex: 50%;


}

.col-75 { -ms-flex: 75%; flex: 75%;


}

.col-25,
.col-50, .col-75 { padding: 0 16px;
}

.container { background-color: #f2f2f2; padding: 5px 20px 15px 20px; border:


1px solid lightgrey; border-radius: 3px;
}

input[type=text] { width: 100%; margin-bottom: 20px; padding: 12px; border:


1px solid #ccc; border-radius: 3px;
}

label { margin-bottom: 10px; display: block;


}

.icon-container { margin-bottom: 20px; padding: 7px 0; font-size: 24px;


}

.btn { background-color: #04AA6D; color: white; padding: 12px; margin:


10px 0; border: none; width: 100%; border-radius: 3px; cursor: pointer; font-
size: 17px;
}

.btn:hover { background-color: #45a049;


}

span.price { float: right; color: grey;


}

@media (max-width: 800px) { .row { flex-direction: column-reverse;


Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}
.col-25 {
margin-bottom: 20px;
}
}
</style>
</head>

<body>
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">

<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="Name">
<label for="phone"><i class="fa fa-envelope"></i> Phone no.</label>
<input type="text" id="phone no." name="phone no." placeholder="0000-
9999-00">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="@gmail.com">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address" placeholder="Address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="city">

<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="state">
</div>
<div class="col-50">
<label for="zip">Pin code</label>
<input type="text" id="zip" name="zip" placeholder="zip">
</div>
</div>
</div>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<!-- <div class="col-50">
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="John More
Doe">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-
2222-3333-4444">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth"
placeholder="September">

<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>

</div>
<label>
<input type="checkbox" checked="checked" name="sameadr"> Shipping
address same as billing
</label>
<input type="submit" value="Continue to checkout" class="btn">
</form>
</div>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
</div> -->
<input type="submit" value="Payment" class="btn"onClick="myFunction()"/>

<div class="col-25">
<div class="container">
<h4>Cart
<span class="price" style="color:black">
<i class="fa fa-shopping-cart"></i>
<b>2</b>
</span> </h4>
<p><a href="#"> 1</a> <span class="price">₹19,990</span></p>
<p><a href="#"> 2</a> <span class="price">₹23,950</span></p>
<hr>
<p>Total <span class="price"
style="color:black"><b>₹43,940</b></span></p> </div>
</div> <script>
function myFunction() {
window.location.href="payment.php";
}
</script>
</div>
</body>
</html>
FOOTER
</main>

<footer id="footer" class="bg-dark text-white py-5">


<div class="container">
<div class="row">
<div class="col-lg-3 col-12">
<h4 class="font-rubik font-size-20">YouR StorE</h4>
<p class="font-size-14 font-rale text-white-50">D-4 1st Floor
Delhi,India</p> </div>
<div class="col-lg-4 col-12">
<h4 class="font-rubik font-size-20">Blog</h4>
<form class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Email *">
</div>
<div class="col">
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<button type="submit" class="btn btn-primary mb-
2">submit</button>
</div>
</form>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Information</h4> <div
class="d-flex flex-column flex-wrap">
<a href="https://web.whatsapp.com/" class="font-rale font-size-14
text-white-50 pb-1">Call +91 11002256</a>
<a
href="https://www.google.com/maps/@28.7320506,77.2749958,15z" class="font-
rale font-size-14 text-white50 pb-1">Location</a>
<a href="#" class="font-rale font-size-14 text-white-50 pb-
1">Services</a>
<a href="#" class="font-rale font-size-14 text-white-50 pb-1">About
Us</a>
</div>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Follow Us On</h4>
<div class="d-flex flex-column flex-wrap">
<a href="https://www.instagram.com/" class="font-rale font-size-14
text-white-50 pb-1">Instagram</a>
<a href="https://www.facebook.com/" class="font-rale font-size-14
text-white-50 pb-1">Facebook</a>
<a href="https://twitter.com/" class="font-rale font-size-14 text-white-
50 pb-1">Twitter</a>
<a href="https://www.youtube.com/" class="font-rale font-size-14
text-white-50 pb-1">Youtube</a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright text-center bg-dark text-white py-2">
<p class="font-rale font-size-14">&copy; Copyrights 2021. Desing By <a
href="#" class="color-second">YouR StorE</a></p>
</div>

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"
integrity="sha256xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfoo
Ao" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifw
B6" crossorigin="anonymous"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.j
s" integrity="sha256pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js
" integrity="sha256-
CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
crossorigin="anonymous"></script>

<script src="index.js"></script>
</body>
</html>

LOGIN

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>
sign in </title>
<style> Body {
font-family: Calibri, Helvetica, sans-serif; background-color: pink;
} button {
background-color: #4CAF50;

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
width: 100%; color: orange; padding: 15px; margin: 10px
0px; border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1; padding: 0;
margin-left: 250px;
margin-right: 250px;
}
input[type=text], input[type=password] {
width: 100%; margin: 8px 0; padding: 12px 20px;
display: inline-block; border: 2px solid green;
box-sizing: border-box;
}
button:hover { opacity: 0.7;
}
.cancelbtn { width: auto; padding: 10px 18px;
margin: 10px 5px;
}

.container { padding: 25px;


background-color: lightblue;
}
</style>
</head>
<body>
<center> <h2>Sign In</h2> </center>
<form>
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username"
required> <label>Contact No. : </label>
<input type="text" placeholder="Enter contact no" name="contact"
required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password"
required>
<label>Confirm Password : </label>

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<input type="password" placeholder="Enter confirm password"
name="password" required> <button type="submit">Login</button>

<button type="button" class="cancelbtn"> Cancel</button>


<a href="signup.php"> Already have account? </a> </div>
</form>
</body>
<script>
var pressedButton = document.getElementsByTagName("button")[0];
pressedButton.addEventListener("click", function (event) {
alert("Signin successfuly.")
})
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> LogIn </title>
<style> Body {
font-family: Calibri, Helvetica, sans-serif; background-color: pink;
} button {
background-color: #4CAF50;
width: 100%; color: orange; padding: 15px; margin: 10px
0px; border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1; padding: 0; margin-left: 250px;
margin-right: 250px;
}
input[type=text], input[type=password] {
width: 100%; margin: 8px 0; padding: 12px 20px;
display: inline-block; border: 2px solid green;
box-sizing: border-box;
}
button:hover { opacity: 0.7;
}

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
.cancelbtn { width: auto; padding: 10px 18px; margin: 10px
5px; background-color: #4CAF50;
width: 100%; color: orange; padding: 15px; margin: 10px
0px; border: none;
cursor: pointer;

.container { padding: 25px;


background-color: lightblue;
}
</style>
</head>
<body>
<center> <h2>Log in</h2> </center>
<form>
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username"
required> <label>Password : </label>
<input type="password" placeholder="Enter Password" name="password"
required>

<input type="submit" class="cancelbtn"onClick="myFunction()"/>


<input type="checkbox" checked="checked"> Remember me
Forgot <a href="#"> password? </a>

<script>
function myFunction() {
window.location.href="index.php";
}
</script>
</div>
</form>
</body> <script>
var pressedButton = document.getElementsByTagName("button")[0];
pressedButton.addEventListener("click", function (event) { alert("LogIn
successfuly")
})
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
</script>
</html>

DATABASE

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";


SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

--
CREATE TABLE `cart` (
`cart_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`item_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `product` (


`item_id` int(11) NOT NULL,
`item_brand` varchar(200) NOT NULL,
`item_name` varchar(255) NOT NULL,
`item_price` double(10,2) NOT NULL,
`item_image` varchar(255) NOT NULL,
`item_register` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `product` (`item_id`, `item_brand`, `item_name`, `item_price`,


`item_image`, `item_register`) VALUES
(1, 'Samsung', 'Samsung Galaxy A52s', 29850.00, './assets/products/99.jpg', '2021-
11-28 11:08:57'), -- NOW()
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
(2, 'Redmi', 'Redmi 9 Activ', 12999.00, './assets/products/98.jpg', '2021-11-28
11:08:57'),
(3, 'Redmi', 'Redmi Note 10 Pro Max', 19999.00, './assets/products/97.jpg', '2021-
11-28 11:08:57'),
(4, 'Redmi', 'Redmi 9i Sport', 8799.00 , './assets/products/96.jpg', '2021-11-28
11:08:57'),
(5, 'Redmi', 'Redmi 9 Prime', 10499.00, './assets/products/95.jpg', '2021-11-28
11:08:57'),
(6, 'Redmi', 'Redmi Note 10S', 17900.00, './assets/products/94.jpg', '2021-11-28
11:08:57'),
(7, 'Redmi', 'Redmi Note 10T 5G', 15300.00, './assets/products/93.jpg', '2021-11-28
11:08:57'),
(8, 'Redmi', 'Redmi 8A Dual', 9990.00, './assets/products/92.jpg', '2021-11-28
11:08:57'),
(9, 'Samsung', 'Samsung Galaxy F12', 9490.00, './assets/products/91.jpg', '2021-11-
28 11:08:57'),
(10, 'Samsung', 'Samsung Galaxy S21 5G', 37990.00, './assets/products/90.jpg',
'2021-11-28 11:08:57'),
(11, 'Apple', 'Apple iPhone SE', 35249.00, './assets/products/89.jpg', '2021-11-28
11:08:57'),
(12, 'Apple', 'Apple iPhone 13', 89900.00, './assets/products/88.jpg', '2021-11-28
11:08:57'),
(13, 'Apple', 'Apple iPhone 12 Pro Max', 129900.00, './assets/products/87.jpg',
'2021-11-28 11:08:57');

CREATE TABLE `user` (


`user_id` int(11) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`register_date` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `user` (`user_id`, `first_name`, `last_name`, `register_date`)


VALUES
(1, 'Daily', 'Tuition', '2020-03-28 13:07:17'),
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
(2, 'Akshay', 'Kashyap', '2020-03-28 13:07:17');

CREATE TABLE `wishlist` (


`cart_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`item_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `cart`


ADD PRIMARY KEY (`cart_id`);

ALTER TABLE `product`


ADD PRIMARY KEY (`item_id`);

ALTER TABLE `user`


ADD PRIMARY KEY (`user_id`);

ALTER TABLE `cart`


MODIFY `cart_id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `product`


MODIFY `item_id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=14;
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
ALTER TABLE `user`
MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=3;
COMMIT;

<?php

class DBController
{

protected $host = 'localhost'; protected $user = 'root'; protected $password


= '';
protected $database = "shopee";

public $con = null;

public function __construct()


{
$this->con = mysqli_connect($this->host, $this->user, $this->password,
$this->database); if ($this->con->connect_error){
echo "Fail " . $this->con->connect_error;
}
}

public function __destruct()


{
$this->closeConnection();
}

protected function closeConnection(){


if ($this->con != null ){ $this->con->close();
$this->con = null;
}
}
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}

<section id="banner_adds">
<div class="container py-5 text-center">
<img src="./assets/banner1-cr-500x150.jpg" alt="banner1" class="img-
fluid"> <img src="./assets/banner2-cr-500x150.jpg" alt="banner1"
class="img-fluid"> </div>
</section>

<section id="banner-area">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./assets/Banner111.png" alt="Banner1"> </div>
<div class="item">
<img src="./assets/Banner222.jpg" alt="Banner2"> </div>
<div class="item">
<img src="./assets/Banner333.jpg" alt="Banner3"> </div>
</div>
</section>

<!-- Blogs -->


<section id="blogs">
<div class="container py-4">
<h4 class="font-rubik font-size-20">Latest Blogs</h4> <hr>

<div class="owl-carousel owl-theme">


<div class="item">
<div class="card border-0 font-rale mr-5" style="width: 18rem;">
<h5 class="card-title font-size-16">New Mobiles</h5>
<img src="./assets/blog/blog11.jpg" alt="cart image" class="card-img-
top">
<p class="card-text font-size-14 text-black-50 py-1">Here, you will
find the latest smartphones and feature phones launched across the world. We’ve
limited the search to the last 100 mobile phones launched.</p>

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<a href="https://gadgets.ndtv.com/mobiles/latest-phones"
class="color-second text-left">Check it out</a>
</div>
</div>
<div class="item">
<div class="card border-0 font-rale mr-5" style="width: 18rem;">
<h5 class="card-title font-size-16">Latest Technology</h5>
<img src="./assets/blog/blog22.jpg" alt="cart image" class="card-img-
top">
<p class="card-text font-size-14 text-black-50 py-1">Read here for
being updated with latest technology.</p>
<a
href="https://techxplore.com/?utm_source=bing&utm_medium=cpc&utm_campai
gn=Bing%20TechX&utm_term=emerging
%20trends%20technology&utm_content=Ad%20group%20%231" class="color-
second text-left">Check it out</a>
</div>
</div>
<div class="item">
<div class="card border-0 font-rale mr-5" style="width: 18rem;">
<h5 class="card-title font-size-16">Upcoming Gedgets</h5>
<img src="./assets/blog/blog33.jpg" alt="cart image" class="card-img-
top">
<p class="card-text font-size-14 text-black-50 py-1">20 Insanely Cool
Gadgets That Are Going to Sell Out This year.</p>
<a href="https://gadgetslaboratory.com/trending/cool-gadgets-
2020/20-insanely-cool-gadgets-that-are-going-tosell-out-
b/?kw=top%20gadget&placement=&network=o&mt=p&adp=&msclkid=3ceb6d2
3ec1f1fe5963a0c599991b722" class="color-second text-left">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<!-- !Blogs -->

<!-- New Phones -->


<?php
shuffle($product_shuffle);

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
if($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['new_phones_submit'])){
// call method addToCart
$Cart->addToCart($_POST['user_id'], $_POST['item_id']);
}
}
?>
<section id="new-phones">
<div class="container">
<h4 class="font-rubik font-size-20">New In</h4> <hr>

<div class="owl-carousel owl-theme">


<?php foreach ($product_shuffle as $item) { ?>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="<?php printf('%s?item_id=%s', 'product.php',
$item['item_id']); ?>"><img src="<?php echo
$item['item_image'] ?? "./assets/products/1.png"; ?>" alt="product1" class="img-
fluid"></a> <div class="text-center">
<h6><?php echo $item['item_name'] ?? "Unknown"; ?></h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>₹<?php echo $item['item_price'] ?? '0' ; ?></span>
</div>
<form method="post">
<input type="hidden" name="item_id" value="<?php echo
$item['item_id'] ?? '1'; ?>"> <input type="hidden"
name="user_id" value="<?php echo 1; ?>">
<?php
if (in_array($item['item_id'], $Cart->getCartId($product-
>getData('cart')) ?? [])){
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
echo '<button type="submit" disabled class="btn btn-
success font-size-12">In the Cart</button>';
}else{
echo '<button type="submit" name="top_sale_submit"
class="btn btn-warning font-size-12">Add to Cart</button>';
}
?>
</form>
</div>
</div>
</div>
<?php } // closing foreach function ?> </div>

</div>
</section>
<!-- !New Phones -->

<?php
$brand = array_map(function ($pro){ return $pro['item_brand']; },
$product_shuffle);
$unique = array_unique($brand);
sort($unique);
shuffle($product_shuffle);

if($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['special_price_submit'])){
// call method addToCart
$Cart->addToCart($_POST['user_id'], $_POST['item_id']);
}
}

$in_cart = $Cart->getCartId($product->getData('cart'));

?>
<section id="special-price">
<div class="container">
<h4 class="font-rubik font-size-20">Price Drop</h4>
<div id="filters" class="button-group text-right font-baloo font-size-16">
<button class="btn is-checked" data-filter="*">All Brand</button>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<?php
array_map(function ($brand){
printf('<button class="btn" data-filter=".%s">%s</button>', $brand,
$brand); }, $unique);
?>
</div>

<div class="grid">
<?php array_map(function ($item) use($in_cart){ ?>
<div class="grid-item border <?php echo $item['item_brand'] ?? "Brand" ;
?>">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="<?php printf('%s?item_id=%s', 'product.php',
$item['item_id']); ?>"><img src="<?php echo
$item['item_image'] ?? "./assets/products/13.png"; ?>" alt="product1" class="img-
fluid"></a> <div class="text-center">
<h6><?php echo $item['item_name'] ?? "Unknown"; ?></h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>₹<?php echo $item['item_price'] ?? 0 ?></span>
</div>
<form method="post">
<input type="hidden" name="item_id" value="<?php echo
$item['item_id'] ?? '1'; ?>"> <input type="hidden"
name="user_id" value="<?php echo 1; ?>">
<?php
if (in_array($item['item_id'], $in_cart ?? [])){
echo '<button type="submit" disabled class="btn btn-
success font-size-12">In the Cart</button>';
}else{
echo '<button type="submit" name="top_sale_submit"
class="btn btn-warning font-size-12">Add to Cart</button>';
}
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
?>
</form>
</div>
</div>
</div>
</div>
<?php }, $product_shuffle) ?>
</div>
</div>
</section>

<!-- Top Sale -->


<?php

shuffle($product_shuffle);

if($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['top_sale_submit'])){

$Cart->addToCart($_POST['user_id'], $_POST['item_id']);
}
}
?>
<section id="top-sale">
<div class="container py-5">
<h4 class="font-rubik font-size-20">Trending</h4> <hr>

<div class="owl-carousel owl-theme">


<?php foreach ($product_shuffle as $item) { ?>
<div class="item py-2">
<div class="product font-rale">
<a href="<?php printf('%s?item_id=%s', 'product.php',
$item['item_id']); ?>"><img src="<?php echo
$item['item_image'] ?? "./assets/products/1.png"; ?>" alt="product1" class="img-
fluid"></a> <div class="text-center">
<h6><?php echo $item['item_name'] ?? "Unknown"; ?></h6>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span> </div>
<div class="price py-2">
<span>₹<?php echo $item['item_price'] ?? '0' ; ?></span>
</div>
<form method="post">
<input type="hidden" name="item_id" value="<?php echo
$item['item_id'] ?? '1'; ?>"> <input type="hidden"
name="user_id" value="<?php echo 1; ?>">
<?php
if (in_array($item['item_id'], $Cart->getCartId($product-
>getData('cart')) ?? [])){
echo '<button type="submit" disabled class="btn btn-success
font-size-12">In the Cart</button>';
}else{
echo '<button type="submit" name="top_sale_submit"
class="btn btn-warning font-size-12">Add to Cart</button>';
}
?>

</form>
</div>
</div>
</div>
<?php }
</div>

</div>
</section>

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
if (isset($_POST['delete-cart-submit'])){
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
$deletedrecord = $Cart->deleteCart($_POST['item_id']);
}

if(isset($_POST['cart-submit'])){
$Cart->saveForLater($_POST['item_id'], 'cart', 'wishlist');
}
}
?>

<section id="cart" class="py-3 mb-5">


<div class="container-fluid w-75">
<h5 class="font-baloo font-size-20">Wishlist</h5>

<div class="row">
<div class="col-sm-9">
<?php foreach ($product->getData('wishlist') as $item) :
$cart = $product->getProduct($item['item_id']);
$subTotal[] = array_map(function ($item){
?>

<div class="row border-top py-3 mt-3">


<div class="col-sm-2">
<img src="<?php echo $item['item_image'] ??
"./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-
fluid">
</div>
<div class="col-sm-8">
<h5 class="font-baloo font-size-20"><?php echo
$item['item_name'] ?? "Unknown"; ?></h5>
<small>by <?php echo $item['item_brand'] ?? "Brand";
?></small>

<div class="d-flex">
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<a href="#" class="px-2 font-rale font-size-14">20,534
ratings</a>
</div>

<div class="qty d-flex pt-2">

<form method="post">
<input type="hidden" value="<?php echo $item['item_id']
?? 0; ?>" name="item_id">
<button type="submit" name="delete-cart-submit"
class="btn font-baloo text-danger pl-0 pr-3 border-right">Delete</button>
</form>

<form method="post">
<input type="hidden" value="<?php echo $item['item_id']
?? 0; ?>" name="item_id">
<button type="submit" name="cart-submit" class="btn
font-baloo text-danger">Add to Cart</button>
</form>

</div>

</div>

<div class="col-sm-2 text-right">


<div class="font-size-20 text-danger font-baloo">
₹<span class="product_price" data-id="<?php echo
$item['item_id'] ?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
</div>
</div>
</div>
<!-- !cart item -->
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<?php
return $item['item_price'];
}, $cart); endforeach;
?>
</div>
</div>

</div>
</section>

NOT FOUND

<?php

require ('../database/DBController.php');

require ('../database/Product.php');

$db = new DBController();


$product = new Product($db);

if (isset($_POST['itemid'])){
$result = $product->getProduct($_POST['itemid']); echo
json_encode($result);
}

<section id="cart" class="py-3 mb-5">


<div class="container-fluid w-75">
<h5 class="font-baloo font-size-20">Shopping Cart</h5>

<div class="row">
<div class="col-sm-9">

<div class="row border-top py-3 mt-3">


<div class="col-sm-12 text-center py-2">

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<img src="./assets/blog/empty_cart.png" alt="Empty Cart"
class="img-fluid" style="height: 200px;"> <p class="font-baloo
font-size-16 text-black-50">Empty Cart</p>
</div>
</div>

</div>

<div class="col-sm-3">
<div class="sub-total border text-center mt-2">
<h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-
check"></i> Your order is eligible for FREE Delivery.</h6>
<div class="border-top py-4">
<h5 class="font-baloo font-size-20">Subtotal ( <?php echo
isset($subTotal) ? count($subTotal) : 0; ?> item):&nbsp; <span class="text-
danger">$<span class="text-danger" id="deal-price"><?php echo isset($subTotal)
? $Cart>getSum($subTotal) : 0; ?></span> </span> </h5>
<button type="submit" class="btn btn-warning mt-3">Proceed to
Buy</button>
</div>
</div>
</div>

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

<section id="cart" class="py-3 mb-5">


<div class="container-fluid w-75">
<h5 class="font-baloo font-size-20">Wishlist</h5>

<div class="row">
<div class="col-sm-9">

<div class="row border-top py-3 mt-3">


<div class="col-sm-12 text-center py-2">

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
<img src="./assets/blog/empty_cart.png" alt="Empty Cart"
class="img-fluid" style="height: 200px;"> <p class="font-baloo
font-size-16 text-black-50">Empty Wishlist</p>
</div>
</div>

</div>
</div>

</div>
</section>

STYLESHEET

@import
url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Ralewa
y&family=Rubik&display=swap");

button, button:focus { outline: none !important; box-shadow: none


!important;
}

.font-baloo {
font-family: "Baloo Thambi 2", cursive;
}

.font-rale {
font-family: "Raleway", cursive;
}

.font-rubik {
font-family: "Rubik", cursive;
}

.font-size-12 { font-size: 12px;


}

.font-size-14 { font-size: 14px;


Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}

.font-size-16 { font-size: 16px;


}

.font-size-20 { font-size: 20px;


}

.color-primary { color: #003859;


}

.color-primary-bg { background: #003859;


}

.color-second { color: #00A5C4;


}

.color-second-bg { background: #00A5C4;


}

.color-yellow { color: #FFD289;


}

.color-yellow-bg { background: #FFD289;


}

#top-sale .owl-carousel .item .product a { overflow: hidden;


}
#top-sale .owl-carousel .item .product img { transition: transform 0.5s ease;
}
#top-sale .owl-carousel .item .product img:hover {
transform: scale(1.1);
}
#top-sale .owl-carousel .owl-nav button {
position: absolute; top: 30%; outline: none;
}
#top-sale .owl-carousel .owl-nav button.owl-prev { left: 0;
}

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
#top-sale .owl-carousel .owl-nav button.owl-prev span, #top-sale .owl-carousel
.owl-nav button.owl-next span {
font-size: 35px; color: #003859; padding: 0 1rem;
}
#top-sale .owl-carousel .owl-nav button.owl-prev span { margin-left: -4rem;
}
#top-sale .owl-carousel .owl-nav button.owl-next { right: 0;
}
#top-sale .owl-carousel .owl-nav button.owl-next span { margin-right: -4rem;
}

#special-price .grid .grid-item { margin-right: 1.2rem; margin-top: 1rem;


}

.gradient-custom {

background: #6a11cb;

background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37,


117, 252, 1));

background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252,
1))
}

JS FILE

$(document).ready(function(){

$("#banner-area .owl-carousel").owlCarousel({ dots: true, items: 1


});

$("#top-sale .owl-carousel").owlCarousel({ loop: true, nav: true,


dots: false, responsive : {
0: { items: 1
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
}, 600: { items: 3
},
1000 : { items: 5
}
}
});

var $grid = $(".grid").isotope({ itemSelector : '.grid-item',


layoutMode : 'fitRows'
});

$(".button-group").on("click", "button", function(){ var filterValue =


$(this).attr('data-filter');
$grid.isotope({ filter: filterValue});
})

$("#new-phones .owl-carousel").owlCarousel({
loop: true, nav: false, dots: true, responsive : { 0: {
items: 1 }, 600: { items: 3 },
1000 : { items: 5
}
}
});

$("#blogs .owl-carousel").owlCarousel({ loop: true, nav: false,


dots: true, responsive : { 0: { items: 1 }, 600:
{ items: 3
}
}
})

let $qty_up = $(".qty .qty-up"); let $qty_down = $(".qty .qty-down");


let $deal_price = $("#deal-price");

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
$qty_up.click(function(e){

let $input = $(`.qty_input[data-id='${$(this).data("id")}']`); let $price =


$(`.product_price[data-id='${$(this).data("id")}']`);

$.ajax({url: "template/ajax.php", type : 'post', data : { itemid :


$(this).data("id")}, success: function(result){ let obj =
JSON.parse(result);
let item_price = obj[0]['item_price'];

if($input.val() >= 1 && $input.val() <= 9){


$input.val(function(i, oldval){
return ++oldval;
});

$price.text(parseInt(item_price * $input.val()).toFixed(2));

let subtotal = parseInt($deal_price.text()) + parseInt(item_price);


$deal_price.text(subtotal.toFixed(2));
}

}});
});

$qty_down.click(function(e){

let $input = $(`.qty_input[data-id='${$(this).data("id")}']`); let $price =


$(`.product_price[data-id='${$(this).data("id")}']`);

$.ajax({url: "template/ajax.php", type : 'post', data : { itemid :


$(this).data("id")}, success: function(result){ let obj =
JSON.parse(result); let item_price = obj[0]['item_price'];

if($input.val() > 1 && $input.val() <= 10){


Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
$input.val(function(i, oldval){
return --oldval;
});

$price.text(parseInt(item_price * $input.val()).toFixed(2));

let subtotal = parseInt($deal_price.text()) - parseInt(item_price);


$deal_price.text(subtotal.toFixed(2));
}

}});
});

});

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
HOME PAGE VIEW

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
LOG IN & SIGNUP PAGE

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
CART

WISHLIST

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
CHECKOUT

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
MOBILE VIEW

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter- 5 TESTING

5.1 Testing
The compilation of a system is achieved only it has been thoroughly tasted. Through
this gives a feel the project is completed, there cannot be any project without going
through this stage. Through the programmer may have taken many precautions not
to commit any project can undergo the real time environment execution without ant
break downs, therefore a package can be rejected even at this stage.
The testing phase involves the testing of the developed system using various kinds
of data. An elaborated testing of data is prepared and a system is tested using the test
data. While testing, errors are noted and correction remade, the correction are also
noted for future use.

5.2 Types of Testing

§ System Testing
Testing is a set of activities that can be planned in advance and conducted
systematically. The proposed system is tested in parallel with the software that
consists of its own phases of analysis implementation, testing and maintenance.
Following are the tests conducted in the system.
§ Unit Testing
During the implementation of the system each module of the system was tested
separately to uncover errors within its boundaries. User interface was used as a
guide in the process.
§ Module Testing
A module is composed of various programs related to that module. Module testing
is done to check the module functionality and interaction between units within a
module.It checks the functionality of each program with relation to other programs
within the same module. It then tests the overall functionality of each module.
§ Integration Testing
Integration testing is a systematic technique for construction the program structure
while conducting tests to uncover errors associated with interfacing. The objective
is to take unit tested module and build a program structure that has been dictated by
design.
§ Acceptance Testing
The software has been tested with the realistic data given by the client and product
fruitful results. The client satisfying all the requirement specified by them has also

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
developed the software within the time limitation specified. A demonstration has
been given to the client and the end-user giving all the operational features.

5.3 Tips to enhance our website

§ Improve the User’s Experience


It is of immense important to ensure that your visitors would have the best experience
while exploring your site. To ensure everything is working just fine, you should
consider the following points. Make sure your website is accessible when it is not,
your visitors would leave your site and look for your competition to make a purchase.
Generally, inaccessible site losses up to 5% of potential sales, which is why it is
important to ensure that your site doesn’t fall into that category. More and more
people are now interested in using an alternative to Internet Explorer, and if your site
only works in this browser, you will notice your sales going down. Instead of saying
“Add to your basket”, try to be more authoritative mentioning, “Buy”. Inspire your
visitors to make a move. Pay attention to the usability of your website – make sure
it every piece of information that your customers would need before finalizing a
buying decision. Make your properties visible, offer images, add description, and
pay attention to making it easier for your visitors to explore different pages of your
site.

§ Maintain an honest approach


Be very clear about the availability of different properties. If they are out of stock,
inform your customer as early as possible. Similarly be clear about pricing and to
improve your conversation, make sure you inform the user about shipping charges
even before they have added it to basket. You can do it by using an IP country data
base.

§ Make it easier for our visitors to explore items


The best idea is to show them similar items when they are checking a particular item
or if they have already added it to the basket. You make use of up selling and cross
– selling technique to improve your conversation rate and sales.

5.4 Testing Techniques

A lot of effect and experience is required to understand the testing techniques to


implement in the web application. In addition, testing for the integration testing is
discussed. Integration testing technique approach is a mix of many. We cannot
proceed with one in order to certify the application that it will integrated. The various
techniques applicable for I& T are:
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
• Top down testing
• Bottom up testing

§ Top down testing


Top down testing is an approach to integrated testing the top integrated modules are
tested and the branch of the module is tested step by step until the end of the related
module, The allows high-level logic and data flow to be tested early in the process
and it tends to minimize the need for drives. However, the need for stubs compilation
tests management and low level utilities are tested relative late in the development
cycle.
Advantages

The advantages of top down testing can be:

• Does not require drivers to be written


• Provides early working module of the program and so design defects can be found
and corrected early.
Disadvantages

The disadvantages can be summarized as:

• It enables testing only for the limited functionality


• Stubs are required in a way that it takes care the integrated functionality • Performed
by developer, which wastes time.

§ Bottom up testing
Bottom Up testing is an approach to integrated testing where the lowest level
components are tested first, then used to facilitate the testing of higher level
components. The process is repeated until the component at the top of the hierarchy
is tested.

Advantages
• The advantages of the bottom up testing are:
• The objects to be tested are known to the developer. So, it is easy to understand the
scope of the test case creation and test data.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
• Psychologically more satisfying because the tester can be certain that the
foundation for
the test object have been tested in full detail.
• Does not require stubs to be created

Disadvantages
• The disadvantages are summarized below:
• The quality of the software can be guaranteed only when the testing is fully
completed. Issue is, defects in the upper levels are detected very late.
• Drivers created compilation in the test management
• Testing individual levels also inflicts high costs for providing a suitable

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
Chapter-6
IMPLEMENTATION PHASE
6.1 Integrated development environment implementation

An integrated development environment (IDE) is a software application that


provides comprehensive facilities to computer programmers for software
development. An IDE normally consists of a source code editor, build automation
tools, and a debugger.IDLE or integrated development and learning environmentis
an integrated development environment for Php, which has been bundled with the
default implementation of the language since 1.5.2b1.It is packaged as an optional
part of the Php packaging with many Linux distributions.IDLE is intended to be a
simple IDE and suitable for beginners, especially in an educational environment. To
that end, it is cross-platform, and avoids feature clutter.IDLE has been criticized for
various usability issues, including losing focus, lack of copying to clipboard feature,
lack of line numbering options, and general user interface design; it has been called
a "disposable" IDE, because users frequently move on to a more advanced IDE as
they gain experience.But it has some amazing features too:-

• Multi window text editor with syntax highlighting, autocompletion, smart indent
and other.
• Php shell with syntax highlighting.
• Integrated debugger with stepping, persistent breakpoints, and call stack visibility.

In today's society, online property has adapted to the fast-paced lifestyle, making
customer’s enjoy the convenience of choosing and buying their favourite
properties at home. Prestashop provides a rich CMS to facilitate the creation of
forms and the manipulation of form data.It provides an abstraction layer (the
“models”) for structuring and manipulating the data of your Web application.It has
the concept of “views” to encapsulate the logic responsible for processing a user’s
request and for returning the responseincluding the user registration and login,
checking and buying commodities, the property cart, the personal order
management, the customer complaint and personal information management, etc.
And the background system achieves functions including the administrator login, the
commodities category management, the commodities management, the order
management, the news and information management, and so on. When released, this
system will be dynamic and interactive, and become an online property system which
is operated easily and has many functions. According to the system design mentioned
earlier, the property centre webs site, consisting two major components: back end
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
and front end system was successfully implemented and loaded on the Internet. At
the developing stage, after undergoing research and experiment on choices of
programs and databases, Php and MySql also java script were the major software
and database used for developing the entire web.
The implementation is the final and important phase. It involves User training,
system testing and successful running of the developed system. The users test the
developed system when changes are made according to the needs. The testing phase
involves the testing of the developed system using various kinds of data. An
elaborate testing of data is prepared and system is tested using the test data.
Implementation is the stage where theoretical design turned into a working system.
Implementation is planned carefully to propose system to avoid unanticipated
problems. Many preparations involved before and during the implementation of
proposed system. The system needed to be plugged in to the organizations network
then it could be accessed from anywhere, after a user login into the portal. The tasks
that had to be done to implement the system were to create the database tables in the
organizations database domain. Then the administrator was granted his role so that
the system could be accessed. The next phase in the implementation was to educate
the system. A demonstration of all the functions that can be carried out by the system
was given to examination department person, who will make extensive use of the
system.

6.2 How to Implement


Consider a customers ordering from an e-commerce website need to be able to get
information about a vendor's properties and services, ask questions, select items they
wish to purchase, and submit payment information. Vendors need to be able to track
customer, inquiries and references and process their orders. So a well-organized
database is essential for the development and maintenance of a site. In a static Web
page, content is determined at the time when the page is created. As users access a
static page, the page always displays the same information. Example of a static Web
page is the page displaying company information. In a dynamic Web page, content
varies based on user input and data received from external sources. We use the term
“data-based Web pages” to refer to dynamic web pages deriving some or all of their
content from data files or databases.
A data-based Web page is requested when a user clicks a hyperlink or the submit
button on a web page form. If the request comes from clicking a hyperlink, the link
specifies either web server program or a Web page that calls a Web server program.
In some cases, the program performs a static query, such as "Display all items from
the Inventory”. If the request is generated when the user clicks a form's submit
button, instead of a hyperlink, the web server program typically uses the form inputs
to be purchased and then submit input to the web server program.
Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
In either case, the Web server is responsible for formatting the query results by
adding HTML tags. The Web server program then sends the programs output back
to the client’s browser as it creates a query. For example, the user might select five
books to be purchased and then submit the input to the Web server program. The web
server program then service’s the order, generating a dynamic Web page response to
confirm the transaction. In either case, the Web server is responsible for formatting
the query results by adding HTML tags. The web server program then sends the
program's output back to the client’s browser.
.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
FUTURE EXPANSION

As the entire project have a big scope in future expansion. So the entire project may
be needed to be modified in future. As technologies advance rapidly so there might
be a necessity to recreate it as a better project than this. As our project is dynamic
and accepts future expansion, it is easy to handle. It means that we welcome new
ideas and additional features to this project in future and can expand the project.
Since in India there are not much online legal firms this makes us unique and
provides chances to expand.

Also in future some industries might be interested in similar projects. So we will be


in putting constant efforts for better future, we will try to making this project more
interesting by adding more features to it.

As this is developed in Dynamic HTML Language still in future we can be develop


it in other languages as it is very easy to handle and it is user friendly. We have used
MySql connection so in future if we wish in expanding the project then one can use
some other connectivity if necessary according to the technological advancements.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
CONCLUSION

As each project has its advantage other-wise without advantages it will not be useful.
Because in now-a-days company are growing in rapid form because of their several
new forms. Also in our country there are several industries which are getting
developed by the software companies so far that we have to use such explanation.
The motive behind having advantage in our project is that if we want to get selected
our project in industries then there should be some features different then there in
our projects. Also there are several advantages in our project like: -
• User Friendly: - This means that these projects can be handled by without any much
distortion. Also there is no need to have study this software and then to use it.
• Cost effectiveness: - This project is very cheaper as they don’t require much
hardware equipment. Means this project can be completed in the low cast. Here you
have to only use the software language like Php and HTML.
• Easy to backup: - the back up of this project is very easy to handle. Also the record
if deleted by mistaken be deleted permanently it will store in the database files.
• Data security: - In our project we have provided the password facility so that each
module can have their data security. Here also report module which cannot be opened
without the password so far that we have provided the security purpose.
• In my project the coding part can be easily understood by other fellow programmer.
Also the coding part of our project is totally written in Php so it is very user friendly.
• My project is also designed in full UI form providing a better user interface.

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift
REFERENCES

1. www.google.com

2. www.youtube.com/daily tuition

3. Learning Web Design by Jennifer Robbins(Book)

4. Learn to code by Shay Howe(Book)

5. https://www.flipkart.com/

6. http://programminghead.com

7. https://stackoverflow.com

8. https://www.educba.com

9. https://www.pexels.com/

Sampada Verma
(04050402020)
BCA 3rd Year 2nd Shift

You might also like