Situs Web eCommerce Produk Tunggal dengan Pembayaran Email dalam PHP

oleh Vincy. Terakhir diubah pada 22 April 2021.

Menyediakan solusi eCommerce online adalah pekerjaan yang sangat menggairahkan. Ini memberi kesempatan untuk memenuhi berbagai pelanggan yang berbeda dengan berbagai tingkat persyaratan.

Salah satu klien saya adalah pemimpin pasar dari satu-satunya produknya yang luar biasa. Karena dia ingin membuat pembukaan online baru karena situasi pandemi ini, saat ini saya sedang membangun eShop-nya. Sudah pasti langkah ini pasti akan mempertahankan (atau meningkatkan) penjualan ?.

Tidak perlu selalu galeri yang penuh dengan produk; dan tidak perlu memiliki katalog atau rak yang penuh dengan produk untuk menjalankan situs web eCommerce. Sangat mungkin untuk memasukkan solusi eCommerce ke aplikasi yang mempromosikan bahkan satu produk.

Mari kita lihat versi dasar membangun situs web eCommerce dengan produk tunggal. Proses checkout melalui email pelanggan. Jika Anda ingin mendapatkan produk software eCommerce, Hera akan menghemat waktu Anda.

Apa isinya?

  1. Tentang contoh eCommerce produk tunggal
  2. Platform eCommerce yang sudah ada
  3. Keuntungan dari situs web eCommerce yang disesuaikan
  4. UI produk tunggal dengan kontrol beli sekarang dan Checkout
  5. validasi formulir jQuery dan checkout AJAX
  6. Alur kode PHP dari checkout eCommerce melalui email
  7. Skrip database
  8. Output: Situs Web eCommerce Produk Tunggal

Tentang contoh eCommerce produk tunggal

Contoh ini adalah solusi eCommerce untuk toko produk tunggal. Ini mengkonfirmasi pesanan pelanggan dengan checkout email.

Saya telah membuat kode keranjang belanja sederhana dalam PHP dengan galeri produk-> keranjang-> alur pembayaran.

Ini menampilkan ubin produk di halaman rumah. Ubin ini memiliki kontrol tombol “Beli sekarang”. Detail produk berasal dari konfigurasi aplikasi.

Ketika pelanggan mencoba untuk membeli produk, itu menanyakan detail melalui formulir HTML untuk melanjutkan pembayaran.

Selain itu, kode contoh ini menggunakan jQuery untuk memvalidasi data formulir checkout. Selain itu, ia menggunakan jQuery AJAX untuk mengirim permintaan checkout.

Ini menggunakan database untuk menyimpan pesanan dan entri item yang dibeli.

Struktur file berikut menunjukkan file yang dibuat untuk contoh eCommerce ini.

Platform eCommerce yang sudah ada

Ada banyak platform eCommerce yang ada di pasaran.

Misalnya, BigCommerce, Shopify adalah salah satu platform online yang mapan. Mereka memungkinkan untuk mengunggah produk dan membuat toko online dengan mudah.

Platform tersebut memberikan solusi untuk kebutuhan eCommerce dan memberikan nilai iklan dalam aspek ketergantungan.

Platform yang ada mencakup perusahaan dalam ukuran yang bervariasi. Kami harus memilih yang cocok di antara banyak pilihan berdasarkan ukuran kami.

Jika bisnis terlalu unik dan bersih dalam kesederhanaannya, maka kustomisasi sendiri adalah yang terbaik.

Keuntungan dari situs web eCommerce yang disesuaikan

Ada beberapa keuntungan dari menyesuaikan situs web eCommerce daripada bergantung pada platform pihak ketiga.

  • Ukuran dan kompleksitas aplikasi akan kecil dan mudah dirawat.
  • Sangat mudah untuk mengelola, mencadangkan, memigrasi data untuk produk, pesanan, dan entitas platform eCommerce lainnya.
  • Ini memberi ruang untuk membangun kembali mesin atau UI berdasarkan kebutuhan berdasarkan perubahan skenario atau iklim toko.
  • Tidak perlu khawatir tentang norma dan peningkatan terbaru pada platform yang menyediakan layanan.
  • Kemampuan beradaptasi yang mudah dari fitur-fitur baru; dan mudah untuk menonaktifkan utilitas yang tidak digunakan.

UI produk tunggal dengan kontrol beli sekarang dan Checkout

Ini adalah kode halaman muatan yang dibuat untuk contoh ini.

Ini termasuk potongan PHP di awal. Setelah itu, ia memiliki HTML untuk menampilkan satu-satunya ubin produk kepada pengguna.

Ubin ini memiliki tombol “Beli sekarang”. Saat mengklik itu akan menampilkan formulir HTML untuk mengumpulkan detail pelanggan, nama dan alamat email.

Dengan mengirimkan detail pelanggan, itu memanggil skrip validasi formulir dan permintaan AJAX untuk checkout produk.

Skrip PHP awal menautkan file konfigurasi dan mendapatkan data produk dari sana. UI menyematkan data dinamis ke dalam penampung menggunakan PHP.

index.php

<?php
use PhppotConfig;

require_once __DIR__ . '/config/Config.php';
$configModel = new Config();
$configResult = $configModel->getProduct();
?>
<HTML>
<HEAD>
<TITLE>Single Product Ecommerce Website</TITLE>
<link href="https://phppot.com/php/single-product-ecommerce-website-with-email-checkout-in-php/assets/css/style.css" type="text/css" rel="stylesheet" />
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
</HEAD>
<BODY>
	<div class="txt-heading">Single product eCommerce application</div>
	<div id="product-grid">
		<div class="product-item">
			<div>
				<img src="<?php echo $configResult["imageUrl"]; ?>">
			</div>
			<div class="product-tile-footer">
				<div class="product-title"><?php echo $configResult["name"]; ?></div>
				<div class="product-price"><?php echo "$ ".  number_format($configResult["price"],2); ?></div>
				<?php if(Config::DISPLAY_QUANTITY_INPUT == true){?><div
					class="quantity">
					<input type="text" class="product-quantity" id="productQuantity"
						name="quantity" value="1" size="2" />
				</div><?php }?>
				<div>
					<button name="data" id="btn" onClick="buynow();"
						class="btnAddAction">Buy Now</button>
				</div>
			</div>
		</div>
	</div>
	<div id="customer-detail">
		<div class="txt-heading">Customers Details</div>
		<div class="product-item">
			<form method="post" action="" id="checkout-form">
				<div class="row">
					<div class="form-label">
						Name: <span class="required error" id="first-name-info"></span>
					</div>
					<input class="input-box" type="text" name="first-name"
						id="first-name">
				</div>
				<div class="row">
					<div class="form-label">
						Email Address: <span class="required error" id="email-info"></span>
					</div>
					<input class="input-box" type="text" name="email" id="email">
				</div>
				<div class="row">
					<div id="inline-block">
						<img id="loader" src="images/spinner.svg" /> <input type="button"
							class="checkout" name="checkout" id="checkout-btn"
							value="Checkout" onClick="Checkout();">
					</div>
				</div>
			</form>
		</div>
	</div>
	<div id="mail-status"></div>
	<script src="assets/js/shop.js"></script>
</BODY>
</HTML>

validasi formulir jQuery dan checkout AJAX

Skrip sederhana ini menampilkan fungsi untuk memvalidasi formulir checkout dan melanjutkan pengiriman permintaan ke server.

Itu validateUser () fungsi mendapatkan data bidang input UI dan melakukan validasi. Ini menegaskan bahwa bidang tidak kosong dan email dalam format yang benar.

Pada validasi yang berhasil, itu memanggil Periksa() fungsi yang menggunakan jQuery AJAX untuk mengirim permintaan checkout ke PHP.

Ini mengirimkan detail pelanggan dan detail produk yang dibeli sebagai parameter AJAX.

aset / js / shop.js

function validateUser() {
	var valid = true;

	$("#first-name").removeClass("error-field");
	$("#email").removeClass("error-field");

	var firstName = $("#first-name").val();
	var email = $("#email").val();
	var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

	$("#first-name-info").html("").hide();
	$("#email-info").html("").hide();
	if (firstName.trim() == "") {
		$("#first-name-info").html("required.").css("color", "#ee0000").show();
		$("#first-name").addClass("error-field");
		valid = false;
	}
	if (email == "") {
		$("#email-info").html("required").css("color", "#ee0000").show();
		$("#email").addClass("error-field");
		valid = false;
	} else if (email.trim() == "") {
		$("#email-info").html("Invalid email address.").css("color", "#ee0000")
				.show();
		$("#email").addClass("error-field");
		valid = false;
	} else if (!emailRegex.test(email)) {
		$("#email-info").html("Invalid email address.").css("color", "#ee0000")
				.show();
		$("#email").addClass("error-field");
		valid = false;
	}
	if (valid == false) {
		$('.error-field').first().focus();
		valid = false;
	}
	return valid;
}

function Checkout() {

	var valid;
	valid = validateUser();
	if (valid) {
		jQuery.ajax({
			url : "ajax-endpoint/create-order-endpoint.php",
			data : 'userName=" + $("#first-name").val() + "&userEmail="
					+ $("#email").val() + "&productQuantity='
					+ $("#productQuantity").val(),
			type : "POST",
			beforeSend : function() {
				$("#loader").show();
				$("#checkout-btn").hide();
			},
			success : function(data) {
				$("#mail-status").html(data);
				$('#checkout-form').find('input:text').val('');
				$("#loader").hide();
				$("#customer-detail").hide();
				$("#checkout-btn").show();
				
			},
			error : function() {
			}
		});

	}
}
function buynow() {
	$("#customer-detail").show();
}

Alur kode PHP dari checkout eCommerce melalui email

Ini adalah langkah pertama untuk mengatur konfigurasi aplikasi untuk menjalankan contoh ini.

Ini menetapkan detail produk dalam larik yang ditampilkan di halaman beranda secara dinamis.

Ini memiliki konstanta DISPLAY_QUANTITY_INPUT yang merupakan flag berisi boolean true / false. Jika benar, ubin produk akan memungkinkan pengguna untuk memasukkan kuantitas.

config / Config.php

<?php
/**
 * Copyright (C) Vincy - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written by Vincy <[email protected]>
 */
namespace Phppot;

/**
 * This class contains the configuration options
 */
class Config
{

    const ADMIN_EMAIL = '[email protected]';

    const CURRENCY_CODE = 'USD';

    const DISPLAY_QUANTITY_INPUT = true;

    public static function getProduct()
    {
        $products = array(
            "productId" => 1,
            "name" => "FinePix Pro2 3D Camera",
            "price" => 1500.00,
            "imageUrl" => 'images/camera.jpg'
        );

        return $products;
    }
}

File ini adalah proses endpoint PHP permintaan AJAX. Ini menerima pelanggan dan rincian pesanan dan memasukkan entri pesanan ke dalam database.

Ini membuat instance kelas CheckoutService untuk mengakses pesanan dan database item pesanan.

Setelah melakukan pemesanan, MailService meminta konfirmasi pesanan melalui email.

Dalam contoh ini, itu mengirim konfirmasi pesanan ke pelanggan. Juga, itu mengirimkan email lain ke Admin untuk memberi tahu bahwa pesanan telah dilakukan.

ajax-endpoint / create-order-endpoint.php

<?php
/**
 * Copyright (C) Vincy - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written by Vincy <[email protected]>
 */
use PhppotCheckoutService;
use PhppotConfig;
use PhppotMailService;
require_once __DIR__ . '/../lib/CheckoutService.php';
require_once __DIR__ . '/../config/Config.php';
require_once __DIR__ . '/../lib/MailService.php';
$configModel = new Config();
$configResult = $configModel->getProduct();
$checkoutService = new CheckoutService();
$mailService = new MailService();
$orderId = $checkoutService->getToken();
$productQuantity = 1;
if (! empty($_POST["productQuantity"])) {
    $productQuantity = $_POST["productQuantity"];
}
$checkoutService->insertOrder($orderId, $_POST["userName"], $_POST["userEmail"], Config::CURRENCY_CODE, $configResult["price"]);

$checkoutService->insertOrderItems($orderId, $configResult["name"], $productQuantity, $configResult["price"]);

$orderResult = $checkoutService->getOrder($orderId);
$orderItemResult = $checkoutService->getOrderItems($orderId);
$recipientArr = array(
    'email' => $orderResult[0]["email"]
);
$mailService->sendUserEmail($orderResult, $recipientArr);
$mailService->sendAdminEmail($orderItemResult, $orderResult);

?>

Ini adalah kode lengkap dari kelas CheckoutService di PHP.

Ini mempersiapkan kueri untuk memasukkan dan membaca pesanan dan entri item pesanan.

Juga, ini mencakup beberapa fungsi utilitas untuk menghasilkan token hash untuk digunakan sebagai id referensi pesanan.

lib / CheckoutService.php

<?php
/**
 * Copyright (C) Vincy - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written by Vincy <[email protected]>
 */
namespace Phppot;

require_once __DIR__ . '/../config/Config.php';

class CheckoutService
{

    private $dbConn;

    public function __construct()
    {
        require_once __DIR__ . '/../config/DataSource.php';
        $this->dbConn = new DataSource();
    }

    function insertOrder($orderId, $name, $email, $currency, $amount)
    {
        $query = "INSERT INTO tbl_order (order_id, name, email, currency, amount) VALUES (?, ?, ?, ?, ?)";
        $paramType = "ssssd";
        $paramValue = array(
            $orderId,
            $name,
            $email,
            $currency,
            $amount
        );

        $insertId = $this->dbConn->insert($query, $paramType, $paramValue);
        return $insertId;
    }

    function insertOrderItems($orderId, $name, $quantity, $item_price)
    {
        $query = "INSERT INTO tbl_order_items (order_id, name, quantity, item_price) VALUES (?, ?, ?, ?)";
        $paramType = "ssid";
        $paramValue = array(
            $orderId,
            $name,
            $quantity,
            $item_price
        );

        $insertId = $this->dbConn->insert($query, $paramType, $paramValue);
        return $insertId;
    }

    function getOrder($orderId)
    {
        $query = "SELECT * FROM tbl_order WHERE order_id='" . $orderId . "'";
        $orderResult = $this->dbConn->select($query);
        return $orderResult;
    }

    function getOrderItems($orderId)
    {
        $query = "SELECT * FROM tbl_order_items WHERE order_id='" . $orderId . "'";
        $orderItemResult = $this->dbConn->select($query);
        return $orderItemResult;
    }

    function getToken()
    {
        $token = "";
        $codeAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        $codeAlphabet .= "abcdefghijklmnopqrstuvwxyz";
        $codeAlphabet .= "0123456789";
        $max = strlen($codeAlphabet) - 1;
        for ($i = 0; $i < 10; $i ++) {
            $token .= $codeAlphabet[mt_rand(0, $max)];
        }
        return $token;
    }
}
?>

Kelas MailService menentukan fungsi secara terpisah untuk mengirim email pelanggan dan Admin pada pesanan yang dilakukan.

Ini menggunakan fungsi PHP mail () untuk mengirim email. Anda dapat mengintegrasikan PHPMailer atau pustaka lainnya. Jika Anda ingin kode untuk mengirim email menggunakan PHPMailer melalui SMTP, tutorial yang ditautkan akan memberikan contohnya.

lib / MailService.php

<?php
namespace Phppot;

class MailService
{

    function sendUserEmail($orderResult, $recipientArr)
    {
        $name = $orderResult[0]["name"];
        $email = $orderResult[0]["email"];
        $orderId = $orderResult[0]["order_id"];
        $subject = "Order Confirmation";
        $content = "Hi, you have placed the order successfully, the order reference id is $orderId. We will contact you shortly. Thank you. Regards, Shop Name team.";

        $toEmail = implode(',', $recipientArr);
        $mailHeaders = "From: " . $name . "<" . $email . ">rn";
        $response = mail($toEmail, $subject, $content, $mailHeaders);
        if ($response) {
            echo "<div class="success"><h1>Thank you for shopping with us.</h1>
                       Your order has been placed and the order reference id is <b>" . $orderId . ".</b><br/>
                       We will contact you shortly.</div>";
        } else {
            echo "<div class="Error">Problem in Sending Mail.</div>";
        }

        return $response;
    }

    function sendAdminEmail($orderItemResult, $orderResult)
    {
        $name = $orderItemResult[0]["name"];
        $email = $orderResult[0]["email"];
        $currency = $orderResult[0]["currency"];
        $orderId = $orderItemResult[0]["order_id"];
        $price = $orderItemResult[0]["item_price"];
        $subject = "New order placed";
        $content = "New order is placed and the order reference id is $orderId.nnProduct Name: $name.nPrice: $currency $price";

        $toEmail = Config::ADMIN_EMAIL;
        $mailHeaders = "From: " . $name . "<" . $email . ">rn";
        $response = mail($toEmail, $subject, $content, $mailHeaders);
        return $response;
    }
}

Skrip database

--
-- Database: `single-product-ecommerce`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_order`
--

CREATE TABLE `tbl_order` (
  `id` int(11) NOT NULL,
  `order_id` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `currency` varchar(255) NOT NULL,
  `amount` decimal(10,2) NOT NULL,
  `create_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- --------------------------------------------------------

--
-- Table structure for table `tbl_order_items`
--

CREATE TABLE `tbl_order_items` (
  `id` int(11) NOT NULL,
  `order_id` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `quantity` int(11) NOT NULL,
  `item_price` decimal(10,2) NOT NULL,
  `create_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_order`
--
ALTER TABLE `tbl_order`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `tbl_order_items`
--
ALTER TABLE `tbl_order_items`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_order`
--
ALTER TABLE `tbl_order`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `tbl_order_items`
--
ALTER TABLE `tbl_order_items`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Output: Situs Web eCommerce Produk Tunggal

Tangkapan layar keluaran berikut menampilkan tampilan dan nuansa ubin produk. Juga, ini menunjukkan formulir checkout mengumpulkan detail pelanggan untuk checkout email.

Gambar Ubin Produk

Gambar Detail Pelanggan

Ini adalah teks respons yang dikembalikan setelah memproses permintaan checkout AJAX. Ini menampilkan id referensi pesanan untuk menindaklanjuti contoh pembelian di masa depan.

Pesan Terima Kasih

Unduh

↑ Kembali ke Atas