Tambahkan ke troli di php menggunakan demo sesi

Posting ini adalah tentang Tutorial Keranjang Belanja PHP menggunakan SESSIONS. Sebelumnya kita telah mempelajari cara membuat Keranjang Belanja dengan PHP & MySQL dimana kita menggunakan database MySQL untuk menyimpan produk yang ditambahkan ke keranjang. Kali ini, kami akan menggunakan variabel sesi PHP untuk menyimpan produk yang ditambahkan ke keranjang

Table of Contents Show

Hasil akhir
Tutorial Keranjang Belanja PHP menggunakan SESSIONS
Siapkan databasenya
Desain Basis Data
Buat basis data
Buat tabel "produk".
Buat tabel "kategori".
Unduh sampel data
Ekstrak dan impor data
File koneksi basis data
Buat file tata letak
Buat file tata letak tajuk
Buat file tata letak footer
Buat file tata letak navigasi
Buat file CSS khusus
Menampilkan Produk
Buat produk. php
Sertakan Kelas PHP
Buat file objek "produk".
Buat file objek "gambar produk".
Hubungkan ke basis data
Inisialisasi tindakan dan paginasi
Menampilkan pesan berdasarkan tindakan
Meminta data dari database
Tambahkan metode "baca" dan "hitung".
Templat untuk menampilkan produk
Tambahkan metode "readFirst()".
Buat tombol "tambahkan ke troli" berfungsi
Buat file paginasi
Bagaimana cara menambahkan ke troli?
Buat add_to_cart. php
Buat keranjang. php
Menampilkan pesan berdasarkan tindakan
Tampilkan item keranjang
Baca produk berdasarkan ID
Bagaimana cara memperbarui keranjang?
Perbarui jumlah keranjang dengan JavaScript
Skrip PHP untuk memperbarui keranjang
Bagaimana cara menghapus produk di troli?
Buat halaman pembayaran
Buat place_order. php
Bagaimana cara membuat halaman produk?
Buat produk. php
Baca detail produk
Baca satu metode produk
Menampilkan thumbnail produk
Baca gambar yang terkait dengan produk
Buat hover gambar berfungsi
Menampilkan detail produk
Render tombol 'Keranjang'
Apa Kata Orang Tentang Kode Ini?
Unduh kode sumber
Daftar fitur
Bagaimana cara menjalankan kode sumber?
Perlu lebih banyak fitur?
Apa berikutnya?
Tutorial Terkait
Beberapa Catatan
Ditemukan Masalah?
Berlangganan ke CodeOfaNinja
Terima kasih
Bagaimana cara menambahkan data keranjang dalam sesi di PHP?
Bagaimana cara menambahkan beberapa item dalam keranjang di PHP?
Bagaimana cara membuat add to cart di PHP?

Isi

Hasil akhir

Tutorial Keranjang Belanja PHP menggunakan SESSIONS

Di akhir tutorial ini, Anda akan mencapai fitur-fitur berikut

Daftar produk dengan paginasi
halaman produk
Tambahkan ke fungsi keranjang
Perbarui fungsi keranjang
Hapus produk dari fungsi keranjang
halaman keranjang
halaman pembayaran
halaman terima kasih

Siapkan databasenya

Desain Basis Data

Nama basis data kami akan disebut "

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

_9", dan kami akan memiliki dua (2) tabel. Gambar di bawah ini adalah representasi visual dari tabel database kami dan bagaimana keterkaitannya

Buat basis data

Mulai Apache dan MySQL. Jika Anda menggunakan XAMPP seperti saya, Anda dapat melakukannya menggunakan panel kontrolnya

Setelah Apache dan MySQL berjalan, buka PhpMyAdmin (http. //localhost/phpmyadmin). Buat basis data baru. Gunakan “shop_cart_sessions_1” sebagai nama database. Klik tombol "Buat".

Buat tabel "produk".

Pada bagian ini, kita akan membuat tabel “produk” (menggunakan PhpMyAdmin) pada database yang baru saja kita buat. Tabel ini akan menyimpan catatan produk

Jalankan pernyataan SQL menggunakan PhpMyAdmin. Klik basis data "shop_cart_sessions_1". Klik tab "SQL". Salin pernyataan SQL di bawah ini dan tempel di area teks. Klik tombol "Pergi".

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(512) NOT NULL,
  `description` text NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COMMENT='products that can be added to cart' AUTO_INCREMENT=41 ;

Buat tabel "kategori".

Tabel ini akan menampung gambar yang terkait dengan produk. Jalankan juga pernyataan SQL berikut di PhpMyAdmin. Ikuti langkah yang sama seperti yang kami lakukan pada tabel "produk".

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Unduh sampel data

Tabel products dan product_images tidak akan berfungsi sepenuhnya tanpa data sampel dan file gambar terkait. Gunakan tombol berikut untuk mengunduh file ZIP

Unduh file SQL dan gambar

Ekstrak dan impor data

Setelah didownload, silahkan ekstrak file tersebut. Impor file SQL menggunakan PhpMyAdmin

Letakkan file gambar di direktori “php-shopping-cart-using-sessions-level-1/uploads/images/”. Direktori itu belum ada. Ikuti langkah-langkah di bawah ini untuk membuatnya

Buat folder “php-shopping-cart-using-sessions-level-1” dan buka. Ini adalah folder utama proyek kami. Buat folder "unggah" dan buka. Buat folder "gambar" dan buka. Salin dan tempel gambar di direktori ini

File koneksi basis data

File ini akan digunakan untuk membangun koneksi database. Buat folder “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_0” dan buka. Buat file “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_1” dan buka. Letakkan kode berikut

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Keluaran

PhpMyAdmin kita akan terlihat seperti gambar di bawah ini. Database dengan dua tabel

Kami belum memiliki output program yang sebenarnya karena kami hanya menyiapkan database. Mari lanjutkan tutorial kami di bawah ini untuk mendapatkan hasil yang lebih banyak

Buat file tata letak

File tata letak berisi kode yang dapat digunakan kembali di setiap halaman web. Tampilan halaman kita akan konsisten karena file tata letak header dan footer ini

Buat file tata letak tajuk

File “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_2” ini akan disertakan di awal file PHP yang akan membutuhkannya. Dengan cara ini, kita tidak perlu menulis kode header yang sama setiap saat

Kami menggunakan kerangka Bootstrap untuk membuat proyek kami terlihat bagus. Jika Anda belum terbiasa dengan Bootstrap, Anda dapat belajar dari tutorial Bootstrap kami di sini

Buat file “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_2”. Tempatkan kode berikut. Omong-omong, perlu diketahui bahwa setelah kami meletakkan kode pada file, selalu simpan perubahan Anda. Anda dapat menggunakan CTRL+S untuk menyimpan jika Anda menggunakan Windows seperti saya

Kode ini berisi variabel sesi kami yang akan menyimpan produk yang ditambahkan ke keranjang. Kami taruh di sini jadi kami tidak perlu menginisialisasi ulang di setiap halaman

Tag judul berisi kode PHP yang akan membuat judul halaman kita dinamis. Bootstrap CSS dan CSS khusus kami disertakan di dalam tag kepala. Bilah navigasi kami ada di dalam navigasi. php, kita akan membuat file ini nanti

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Ini “layout_footer. php” akan disertakan di akhir file PHP yang membutuhkannya. Dengan cara ini, kita tidak perlu menulis kode footer yang sama setiap saat

Kami menggunakan JavaScript jQuery dan Bootstrap di file tata letak footer. jQuery diperlukan oleh JavaScript Bootstrap yang diperlukan untuk fitur seperti drop-down navigasi

Buat file “layout_footer. php”. Letakkan kode berikut

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

Buat file tata letak navigasi

Buat file “ ________3______4 ”. Masukkan kode berikut. Kode ini akan menampilkan bilah navigasi dengan tautan menu "Produk" dan "Keranjang". Ini juga akan menampilkan jumlah produk yang ditambahkan ke keranjang.

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

Buat file CSS khusus

Adat ini. file css adalah tempat gaya khusus kami berada

Buka folder “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_5”.

Buka folder “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_6”.

Buka folder “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_7”.

Buat file “

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_8”.

Tempatkan kode berikut

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

Keluaran

File yang kami buat di bagian ini dimaksudkan untuk digunakan dalam file PHP lain. Jika kami akan mencoba menjalankan file, kami belum akan melihat sesuatu yang berarti

Jika Anda akan menjalankan layout_header. php, maka akan terlihat seperti ini

Adat. cssnya seperti ini

Navigasi. php tampilannya seperti ini

Catatan kaki. php kosong. Mari lanjutkan ke bagian selanjutnya untuk melihat sesuatu yang bermakna

Menampilkan Produk

Buat produk. php

Sekarang kita akan mulai menampilkan produk dari database. Buat

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_9 dengan kode dasar berikut

<?php
// start session
session_start();

// set page title
$page_title="Products";

// page header html
include 'layout_header.php';

// contents will be here 

// layout footer code
include 'layout_footer.php';
?>

Sertakan Kelas PHP

Letakkan kode berikut setelah “session_start();”

// connect to database
include 'config/database.php';

// include objects
include_once "objects/product.php";
include_once "objects/product_image.php";

// class instances will be here

Buat file objek "produk".

Buat folder “

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

_0”. Di dalamnya, buat file

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

_1 dengan kode berikut

<?php
// 'product' object
class Product{

	// database connection and table name
	private $conn;
	private $table_name="products";

	// object properties
	public $id;
	public $name;
	public $price;
	public $description;
	public $category_id;
	public $category_name;
	public $timestamp;

	// constructor
	public function __construct($db){
		$this->conn = $db;
	}
}

Buat file objek "gambar produk".

Buat file

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

2 di dalam folder “

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

0”

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Hubungkan ke basis data

Buka produk. file php. Ganti

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

4 komentar dengan kode berikut.

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Inisialisasi tindakan dan paginasi

Letakkan kode berikut ini setelah kode pada bagian sebelumnya

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Menampilkan pesan berdasarkan tindakan

Kami akan menampilkan pesan berdasarkan tindakan yang diberikan

Letakkan kode berikut setelah include ‘

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

2‘; kode.

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Meminta data dari database

Meminta data dari database. Letakkan kode berikut ini setelah kode pada bagian sebelumnya

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Tambahkan metode "baca" dan "hitung".

Bagian sebelumnya tidak akan berfungsi tanpa kode berikut di dalam “objects/product. php” file objek

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Templat untuk menampilkan produk

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

_9 tidak akan berfungsi tanpa "

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

7", jadi buat file itu dan masukkan kode berikut

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Tambahkan metode "readFirst()".

Tambahkan metode “readFirst()” di file “________11______8”. Bagian sebelumnya tidak akan berfungsi tanpanya

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Buat tombol "tambahkan ke troli" berfungsi

Buka file ________11______9. Ganti

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

0 komentar dengan kode berikut.

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Buat file paginasi

File

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

_7 tidak akan berfungsi tanpa file

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

2. Buat

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

_2 dengan kode berikut

CREATE TABLE IF NOT EXISTS `product_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `name` varchar(512) NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;

Keluaran

Jalankan produk Anda. php di browser http. //localhost/php-shopping-cart-using-sessions-level-1/products. php. Anda akan melihat output seperti gambar di bawah ini

Bagaimana cara menambahkan ke troli?

Buat add_to_cart. php

Buat file

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

_4 karena ketika tombol 'Tambahkan ke troli' diklik, file dengan kode berikut di dalamnya akan dieksekusi

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Buat keranjang. php

Buat

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

_5 dengan kode dasar berikut

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Menampilkan pesan berdasarkan tindakan

Kami akan menampilkan pesan di troli. php berdasarkan tindakan yang diberikan

Letakkan kode berikut setelah include ‘

		</div>
		<!-- /row -->

	</div>
	<!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- custom script will be here -->

</body>
</html>

2‘; dari bagian sebelumnya.

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Tampilkan item keranjang

Letakkan kode berikut setelah kode bagian sebelumnya

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Baca produk berdasarkan ID

Bagian sebelumnya tidak akan berfungsi tanpa metode “readByIds()” berikut di dalam file “

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

7”

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Keluaran

Saat pengguna mengklik tombol "Tambahkan ke troli".

Buka halaman keranjang dengan mengklik opsi "Keranjang" di bilah navigasi

Bagaimana cara memperbarui keranjang?

Perbarui jumlah keranjang dengan JavaScript

Kami memiliki tombol 'perbarui' di troli. file php. Saat tombol itu diklik, kode javascript dipicu

Tempatkan kode berikut di dalam $(document). ready(function(){ dari layout_footer. php .

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Skrip PHP untuk memperbarui keranjang

Bagian sebelumnya tidak akan berfungsi tanpa file ini

Buat file ________16______8 . Tempatkan kode berikut dan simpan.

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Bagaimana cara menghapus produk di troli?

Kami memiliki tombol 'hapus' pada file

.text-align-center{ text-align:center; }
.f-w-b{ font-weight:bold; }
.display-none{ display:none; }

.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct{ width:20%; }
.w-25-pct{ width:25%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }

.m-t-0px{ margin-top:0px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-20px{ margin-bottom:20px; }
.m-b-30px{ margin-bottom:30px; }
.m-b-40px{ margin-bottom:40px; }

.stock-text {
    font-weight: bold;
    color: #008a00;
}

.stock-text-red{
    font-weight:bold;
    color:#b12704;
}

.product-detail {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; }

.update-quantity-form {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.cart-row {
    border-bottom: thin solid #f1f1f1;
    overflow: hidden;
    width: 100%;
    padding: 20px 0 20px 0;
}

.product-link{
    color:#000000;
}

.product-link:hover{
    color:#000000;
    text-decoration:none;
}

.product-img-thumb {
    margin: 0 0 10px 0;
    width: 100%;
    cursor: pointer;
}

5. Saat tombol itu diklik, itu akan memicu remove_from_cart. file php

Buat

<?php
// start session
session_start();

// set page title
$page_title="Products";

// page header html
include 'layout_header.php';

// contents will be here 

// layout footer code
include 'layout_footer.php';
?>

0 file. Tempatkan kode berikut dan simpan

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Buat halaman pembayaran

Halaman pembayaran terlihat seperti halaman keranjang tetapi item tidak dapat diperbarui atau dihapus. Itu seperti ringkasan pesanan. Buat

<?php
// start session
session_start();

// set page title
$page_title="Products";

// page header html
include 'layout_header.php';

// contents will be here 

// layout footer code
include 'layout_footer.php';
?>

_1 dengan kode berikut

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Buat place_order. php

Kami akan menggunakan file ini untuk menampilkan pesan "terima kasih" dan menghapus semua item di keranjang

Buat file

<?php
// start session
session_start();

// set page title
$page_title="Products";

// page header html
include 'layout_header.php';

// contents will be here 

// layout footer code
include 'layout_footer.php';
?>

2. Tempatkan kode berikut

<?php
// used to get mysql database connection
class Database{

	// specify your own database credentials
	private $host = "localhost";
	private $db_name = "shop_cart_sessions_1";
	private $username = "root";
	private $password = "";
	public $conn;

	// get the database connection
	public function getConnection(){

		$this->conn = null;

		try{
			$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
		}catch(PDOException $exception){
			echo "Connection error: " . $exception->getMessage();
		}

		return $this->conn;
	}

}
?>

Keluaran

Ketika pengguna mengklik tombol "Perbarui" di halaman keranjang

Jika pengguna mengklik tombol "Hapus".

Halaman pembayaran

Saat pengguna mengklik tombol "Tempatkan Pesanan".

Bagaimana cara membuat halaman produk?

Buat produk. php

Buat

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

_1 dengan kode dasar berikut

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Baca detail produk

Letakkan kode berikut setelah “$product_image = new ProductImage($db);”

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Baca satu metode produk

Bagian sebelumnya tidak akan berfungsi tanpa metode “readOne()”. Tambahkan metode berikut di dalam file “________16______7”.

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Menampilkan thumbnail produk

Saat thumbnail produk ini diarahkan, ini akan menampilkan versi gambar yang lebih besar. Ini adalah gaya Amazon

Buka file

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

1. Ganti

<?php
// start session
session_start();

// set page title
$page_title="Products";

// page header html
include 'layout_header.php';

// contents will be here 

// layout footer code
include 'layout_footer.php';
?>

6 komentar dengan kode berikut.

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Baca gambar yang terkait dengan produk

Bagian bagian sebelumnya tidak akan berfungsi tanpa metode “readByProductId()” di dalam file “

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

8”

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Hanya satu gambar produk yang ditampilkan dalam satu waktu. Bagian ini menampilkan gambar produk yang lebih besar berdasarkan thumbnail produk yang di-hover

Buka file

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

1. Ganti ________18______9 komentar dengan kode berikut.

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Buat hover gambar berfungsi

Masukkan kode jQuery berikut di dalam “$(document). ready(function(){” dari

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

_9 file

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Menampilkan detail produk

Bagian ini menampilkan harga, deskripsi, dan kategori produk

Buka file

<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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" href="products.php">XYZ Webstore</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">

				<!-- highlight if $page_title has 'Products' word. -->
				<li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>>
					<a href="products.php" class="dropdown-toggle">Products</a>
				</li>

				<li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> >
					<a href="cart.php">
						<?php
						// count products in cart
						$cart_count=count($_SESSION['cart']);
						?>
						Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
					</a>
				</li>
			</ul>

		</div><!--/.nav-collapse -->

	</div>
</div>
<!-- /navbar -->

1. Ganti

// connect to database
include 'config/database.php';

// include objects
include_once "objects/product.php";
include_once "objects/product_image.php";

// class instances will be here

2 komentar dengan kode berikut.

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Render tombol 'Keranjang'

Sekarang kami akan menampilkan tombol 'Tambahkan ke keranjang' jika produk belum ditambahkan ke keranjang. Jika tidak, kami akan menampilkan tombol 'perbarui keranjang'

Tempatkan kode berikut setelah kode bagian sebelumnya

<?php
// session variable that will hold products added to cart
$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
?>
<!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">

    <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- our custom CSS -->
    <link rel="stylesheet" href="libs/css/custom.css" />

</head>
<body>

	<?php include 'navigation.php'; ?>

    <!-- container -->
    <div class="container">
        <div class="row">

        <div class="col-md-12">
            <div class="page-header">
                <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1>
            </div>
        </div>

Keluaran

Saat pengguna mengklik gambar produk apa pun di produk. php, dia akan masuk ke halaman produk yang terlihat seperti gambar di bawah ini

Jika pengguna mengarahkan kursor ke salah satu thumbnail atau gambar kecil tersebut, gambar besar juga akan berubah. Tombol "Tambahkan ke troli" juga berfungsi

Berikut output ketika produk sudah ditambahkan ke troli

Jika pengguna mengklik tombol "Perbarui Keranjang", dia akan diarahkan ke halaman keranjang tempat dia dapat memperbarui jumlah keranjang

Apa Kata Orang Tentang Kode Ini?

Saya sangat senang bahwa kode ini menyenangkan orang lain. Berikut beberapa di antaranya dari kolom komentar

★★★★★ “Hai Mike, nama saya Leonardo dari Argentina. Saya telah membaca blog Anda sejak 4 bulan dari sekarang, dan saya benar-benar harus mengatakannya. tutorial Anda sangat bagus, mereka telah membantu saya dalam banyak pekerjaan saya… Terima kasih banyak. Saya sangat mengagumi pekerjaan Anda. ” ~ Leonardo

★★★★★ “Astaga, tut Anda luar biasa. Saya sangat senang saya telah menemukan blog Anda. Rasa hormat yang besar. ~Milos

★★★★★ “Saya membeli kode sumber level-2 Anda dan itu sangat bagus, sangat membantu saya. Itu sepadan. Terima kasih banyak. ” ~ Ashley Deanna Plata

★★★★★ “Halo, Ini skrip yang bagus dan saya telah membayar untuk pekerjaan Anda (sepadan). ” ~ Louis Blais

★★★★★ “Kata-kata tidak dapat mengungkapkan betapa bersyukurnya saya atas pekerjaan dan artikel yang Anda posting, memiliki beberapa masalah dalam melakukan sesuatu tetapi artikel Anda seperti biasa mengenai palu tepat di kepala. Mereka adalah cara yang bagus untuk berkembang nanti juga. ” ~Jeremy Smith

Unduh kode sumber

Kami sangat menyarankan untuk mengikuti tutorial langkah demi langkah kami yang terperinci di atas terlebih dahulu. Tidak ada yang mengalahkan pengalaman dalam hal belajar. Namun kami yakin Anda akan belajar lebih cepat jika Anda juga melihat kode sumber finalnya. Kami menganggapnya sebagai panduan tambahan Anda

Bayangkan nilai atau peningkatan keterampilan yang dapat diberikannya kepada Anda. Penghasilan tambahan yang bisa Anda dapatkan dari pekerjaan, proyek, atau bisnis Anda. Waktu berharga yang Anda hemat

Daftar fitur

FiturLEVEL 1 Source codeLEVEL 2 Source codeLearn to code a simple cart functionYESYESCantumkan semua produk dari database MySQLYESYESPaginasi di halaman daftar produkYESYESTambahkan ke keranjang tombol tindakanYESYESHapus dari tombol tindakan keranjangYESYESPerbarui jumlah produkYESYESHalaman checkout, halaman tempatkan pesanan & halaman terima kasihYESYESHalaman detail produk ala AmazonYESYESUbah gambar

BELI KODE SUMBER TINGKAT 1

BELI KODE SUMBER TINGKAT 2

Bagaimana cara menjalankan kode sumber?

Setelah Anda mengunduh kode sumber, inilah cara Anda dapat menjalankannya

Ekstrak file ke direktori server Anda
Buka PhpMyAdmin Anda, buat database dengan nama “shop_cart_sessions_1”
Impor file “shop_cart_sessions_1. sql” yang terletak di folder “README”.
Anda mungkin perlu mengubah kredensial database di /config/database. php
Jalankan “produk. php", ini adalah file PHP utama. Kami tidak memiliki index. php

Perlu lebih banyak fitur?

Modul Keranjang Belanja PHP. Anda dapat mengunduh kode sumber “PHP Shopping Cart & Ordering Module” kami. Ini memiliki beberapa fitur yang Anda perlukan untuk mempelajari lebih lanjut tentang cara menangani pengguna, keranjang belanja, dan pemesanan menggunakan teknologi PHP & MySQL. KLIK DI SINI UNTUK MEMPELAJARI LEBIH LANJUT

Sistem Keranjang Belanja PHP. Anda juga dapat mengunduh kode sumber "Sistem Keranjang Belanja PHP" kami. Banyak dari Anda yang meminta jenis kode sumber ini dan tidak ada di sini

Anda memerlukan sistem keranjang belanja dengan manajemen pengguna (pedagang dan pelanggan), manajemen produk, manajemen pesanan, keamanan, dan lebih banyak fitur berdasarkan kode sumber kami di sini di codeofaninja. com. KLIK DI SINI UNTUK MEMPELAJARI LEBIH LANJUT

Apa berikutnya?

Pilihan 1. Kami baru belajar cara membuat kode keranjang belanja online dari awal menggunakan PHP SESSIONS. Tapi tahukah Anda bahwa kita bisa membuat fungsi yang hampir sama menggunakan mekanisme PHP lain yang disebut COOKIES?

Jika Anda bersemangat untuk mempelajari konsep baru ini, mari kita lanjutkan ke tutorial berikutnya. Tutorial Keranjang Belanja PHP Menggunakan COOKIES

pilihan 2. Tutorial berikutnya ini adalah awal dari perjalanan pemrograman JavaScript kita. Pergi ke tutorial kami berikutnya. Cara Membuat REST API Sederhana di PHP – Panduan Langkah Demi Langkah

Tutorial Terkait

Kami mencantumkan semua tutorial pengembangan web full-stack berkualitas tinggi kami di sini. Klik disini

Beberapa Catatan

Ditemukan Masalah?

Jika Anda menemukan masalah dengan kode ini, kirimkan email kepada kami. Sebelum Anda mengirim email, harap baca kode etik kami. Alamat email tim kami [dilindungi email]

Harap deskriptif tentang masalah Anda. Berikan pesan kesalahan, tangkapan layar (atau rekaman layar), dan URL pengujian Anda. terima kasih

Berlangganan ke CodeOfaNinja

Terima tutorial pengembangan web yang berharga ke email Anda. Berlangganan sekarang GRATIS

Nama

Surel

Terima kasih

Terima kasih telah mempelajari Tutorial Keranjang Belanja PHP kami menggunakan SESSIONS. Silakan berbagi tutorial kami dengan teman Anda

Bagaimana cara menambahkan data keranjang dalam sesi di PHP?

Gunakan kunci dalam variabel sesi keranjang. Dalam loop gunakan ID sebagai referensi produk. $pid = $item ['pid']; . dan tingkatkan nilainya satu per satu jika sudah ada di keranjang. .. and increment the value by one if it is already in the cart ...

Bagaimana cara menambahkan beberapa item dalam keranjang di PHP?

Untuk ini kita menggunakan pilihan kotak centang, dengan kotak centang pengguna dapat memilih beberapa item yang ingin dia tambahkan ke keranjang, setelah semua item dipilih, kemudian dia dapat mengklik . Setelah dia mengklik tombol tambahkan ke troli, semua item yang dipilih akan ditambahkan ke trolinya. . Once he has click on add to cart button, all selected item will be added into his cart.

Bagaimana cara membuat add to cart di PHP?

Cara membuat Keranjang Belanja di PHP .

Langkah 1. Buat database lalu buat tabel di dalam database tblproducts itu dan masukkan beberapa data ke dalam tabel ini

Langkah 3. Menambahkan produk ke keranjang belanja. .

Langkah 4. Ambil produk keranjang dari sesi keranjang. .

Langkah 5. Mengeluarkan produk dari keranjang. .

Langkah 6

kode php

Tambahkan ke troli di php menggunakan demo sesi

Hasil akhir

Tutorial Keranjang Belanja PHP menggunakan SESSIONS

Siapkan databasenya

Desain Basis Data

Buat basis data

Buat tabel "produk".

Buat tabel "kategori".

Unduh sampel data

Ekstrak dan impor data

File koneksi basis data

Keluaran

Buat file tata letak

Buat file tata letak tajuk

Buat file tata letak footer

Buat file tata letak navigasi

Buat file CSS khusus

Keluaran

Menampilkan Produk

Buat produk. php

Sertakan Kelas PHP

Buat file objek "produk".

Buat file objek "gambar produk".

Hubungkan ke basis data

Inisialisasi tindakan dan paginasi

Menampilkan pesan berdasarkan tindakan

Meminta data dari database

Tambahkan metode "baca" dan "hitung".

Templat untuk menampilkan produk

Tambahkan metode "readFirst()".

Buat tombol "tambahkan ke troli" berfungsi

Buat file paginasi

Keluaran

Bagaimana cara menambahkan ke troli?

Buat add_to_cart. php

Buat keranjang. php

Menampilkan pesan berdasarkan tindakan

Tampilkan item keranjang

Baca produk berdasarkan ID

Keluaran

Bagaimana cara memperbarui keranjang?

Perbarui jumlah keranjang dengan JavaScript

Skrip PHP untuk memperbarui keranjang

Bagaimana cara menghapus produk di troli?

Buat halaman pembayaran

Buat place_order. php

Keluaran

Bagaimana cara membuat halaman produk?

Buat produk. php

Baca detail produk

Baca satu metode produk

Menampilkan thumbnail produk

Baca gambar yang terkait dengan produk

Buat hover gambar berfungsi

Menampilkan detail produk

Render tombol 'Keranjang'

Keluaran

Apa Kata Orang Tentang Kode Ini?

Unduh kode sumber

Daftar fitur

Bagaimana cara menjalankan kode sumber?

Perlu lebih banyak fitur?

Apa berikutnya?

Tutorial Terkait

Beberapa Catatan

Ditemukan Masalah?

Berlangganan ke CodeOfaNinja

Terima kasih

Bagaimana cara menambahkan data keranjang dalam sesi di PHP?

Bagaimana cara menambahkan beberapa item dalam keranjang di PHP?

Bagaimana cara membuat add to cart di PHP?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami