Implementation of a Garden Center Online Shopping Website

Verified

Added on 2019/10/16

AI Summary

This document details the implementation of a Garden Center online shopping website using HTML, CSS, PHP, and JavaScript, with SQLite for data storage. The website features three main pages: a catalog page displaying plant listings with details like price, size, and description; a cart page allowing users to manage their selected products and quantities, supporting multiple currencies; and an invoice page that displays the purchased items and customer email. The solution utilizes PHP sessions to maintain cart data and includes code snippets for database interaction (DB.php), header (Header.php), footer (Footer.php), catalog (index.php), cart (Cart.php), and invoice (Invoice.php) pages. The website has limitations, including a lack of user authentication, payment gateway integration, wish list functionality, and basic design. The document includes references to external resources.

Garden Center

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Contents
1. Implementation Discussion
2. Code Snippets
3. Limitations
4. References

Implementation:
The garden enter online shopping website is built using the technologies like HTML, CSS, PHP,
JavaScript. The SQLite is used to store the data of plants like the price size and description of
each plant. The solution ha 3 pages catalog, cart, invoice.
Catalog:
The catalog page is used to display the listing of plants retrieved from database.The catalog
listing includes the name, description , price , size and image of each plant with add to cart
button which adds the product to the current shopping basket. Each product has three sizes.
Cart:
The cart page shows the list of products added to the cart . te cart page also allows to add or
remove the quantity of products. We can also use multiple currencies to buy the product. The
cart uses the session global variable of the PHP in order to persist the cart data.
Invoice:
The invoice page shows the list of products we have purchased from the website including the
email of the customer. To purchase the customer have submit the email.
Currency:
The three currency option is given to the user to select in the cart page.
Database:
Two database table is created in the database to store the catalog data.
 Plants :
Plants table is used to store the plant name , description and image.
 Plant Sizes:
Plant sizes table store the plant_is, price and size of the plant.

Code Snippets:
DB.php
<?php
Class DB {
private $dbpath = 'plants.db';
private $con;
const PATH_TO_SQLITE_FILE = '../plants.db';
public function __construct(){
$this->con = new PDO("sqlite:". $this->dbpath); //initializing
mysql db conection
//var_dump($d =$this->con->query("SELECT * FROM
plants")->fetchAll(PDO::FETCH_ASSOC));exit;
}
public function getProducts(){
// for getting all saved products from db
$query="SELECT * , plant_sizes.id as size_id FROM plants
LEFT OUTER JOIN plant_sizes ON plants.id=plant_sizes.plant_id";
$q = $this->con->prepare($query);

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

$q->execute();
$data = $q->fetchAll(PDO::FETCH_ASSOC);
return $data;
}
}
Footer.php
<footer style="position: absolute; bottom: 0; width: 100%; height:
50px; background-color:#7979ff">
<div class="container">
<span style="text-align: center; padding: 10px; color: white;">
© Garden Center – All Rights Reserved
</span>
<span class="pull-right" style="text-align: center; color:
white;font-size:32px;">
<i class="fa fa-envelope"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>

<i class="fa fa-youtube"></i>
</span>
</div>
</footer>
<script src="./js/jquery-2.2.4.min.js"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
Header.php
<?php
include './DB.php';
$obj = new DB;
//$categories = $obj->getCategories();
//$sub_categories = $obj->getSubCategories();
?>
<!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
<head>

<title>Garden Center</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Gentium+Basic|
Merienda|Gudea" rel="stylesheet">
<style>
body{
font-family: 'Gudea', sans-serif;
}
.logo-text {
font-family: 'Merienda', cursive;
color: #fff;
font-size: 32px;
margin-top: 5px;
}
a{
font-weight:bold;
}

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

</style>
</head>
<body style="padding-top: 50px; margin-bottom: 60px;">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="padding: 10px" href="/">
<p class="logo-text">Garden Center</p>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="index.php" > <i class="fa fa-
cubes"></i> Catalog</a></li>
<li><a href="cart.php"> <i class="fa
fa-shopping-cart"></i> Cart</a></li>
</ul>
</div>
</div>
</nav>
Index.php
<?php
session_start();
include 'include/Header.php' ;
$products=[];
$products = $obj->getProducts();
?>
<section class="col-sm-10 col-sm-offset-1 col-xs-12">
<div class="row">
<div class="col-sm-12">
<h3> Plants Catalog</h3>

</div>
<div class="col-md-12">
<?php
if(!empty($products)):
foreach ($products as $key => $pro) :
?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail" >
<h2 class="text-center"><span class="label label-info"><?=$pro['name']?
></span></h2>
<img src="<?=$pro['image']?>" class="img-responsive centered col-sm-6">
<div class="caption">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5><?=$pro['desc']?></h5>
</div>
<div class="col-md-6 col-xs-6 price">
<h3>
<label>£<?=$pro['price']?></label></h3>
</div>
</div>
<p> <h2> <strong>Size:</strong> <?=$pro['size']?> </h2> </p>
<div class="row">
<div class="col-md-12">

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

</div>
</section>
<?php
include 'include/Footer.php' ;
?>
Cart.php
<?php
session_start();
if(!isset($_SESSION['cart'])){
$_SESSION['cart'] = [];
$_SESSION['currencies']=[
'Euro' => ['sign'=>'€', 'rate'=>'1.16'],
'USD' => ['sign'=>'$', 'rate'=>'1.30'],
'Pound' => ['sign'=>'£', 'rate'=>'1']
];
$_SESSION['currency'] = 'Pound';
}
if(isset($_GET['currency'])){
$_SESSION['currency'] = $_GET['currency'];
}
foreach ($_SESSION['currencies'] as $key => $currency) {
if($key == $_SESSION['currency']){

1 out of 24

Implementation of a Garden Center Online Shopping Website

Paraphrase This Document

Paraphrase This Document

Paraphrase This Document

Paraphrase This Document

Related Documents

Creating a Dynamic Poll Website using PHP, MySQL, HTML, and CSS

Developing Interactive Tourism Website Using HTML, CSS, JavaScript

+13062052269

info@desklib.com

Implementation of a Garden Center Online Shopping Website

Paraphrase This Document

⊘ This is a preview!⊘

Paraphrase This Document

⊘ This is a preview!⊘

Paraphrase This Document

⊘ This is a preview!⊘

Paraphrase This Document

⊘ This is a preview!⊘

Related Documents

Creating a Dynamic Poll Website using PHP, MySQL, HTML, and CSS

Developing Interactive Tourism Website Using HTML, CSS, JavaScript

+13062052269

info@desklib.com