PHP
Situs Web eCommerce Produk Tunggal dengan Checkout Email di PHP
Jun
oleh Vincy. Terakhir diubah pada 21 Mei 2021.
Menyediakan solusi eCommerce online adalah pekerjaan yang penuh gairah. Ini memberikan 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 baru secara online karena situasi pandemi ini, saya saat ini membangun eShop-nya. Yang pasti langkah ini pasti akan mempertahankan (atau meningkatkan) penjualan 👍.
Tidak perlu selalu memiliki galeri yang penuh dengan produk; dan tidak perlu memiliki katalog atau rak yang penuh dengan produk untuk menjalankan situs web eCommerce. Sangat mungkin untuk memasang solusi eCommerce ke aplikasi yang mempromosikan bahkan satu produk.
Mari kita lihat versi dasar membangun situs web eCommerce dengan satu produk. Ini hasil checkout melalui email pelanggan. Jika Anda ingin mendapatkan produk software eCommerce, Hera akan menghemat waktu Anda.
Apa yang ada di dalam?
- Tentang contoh eCommerce produk tunggal
- Platform eCommerce yang ada
- Keuntungan dari situs web eCommerce yang disesuaikan
- UI produk tunggal dengan kontrol beli sekarang dan Checkout
- validasi formulir jQuery dan checkout AJAX
- Alur kode PHP dari checkout eCommerce melalui email
- Skrip basis data
- Output: Situs Web eCommerce Produk Tunggal
Tentang contoh eCommerce produk tunggal
UI aplikasi eCommerce dan desain logika back-end harus diarsitektur berdasarkan jenis model bisnis.
Contoh ini adalah solusi eCommerce untuk satu toko produk. Ini mengkonfirmasi pesanan pelanggan dengan checkout email.
Saya telah membuat kode keranjang belanja sederhana di PHP dengan galeri produk->keranjang->alur checkout.
Ini menampilkan ubin produk di halaman beranda. Ubin ini memiliki kontrol tombol “Beli sekarang”. Detail produk berasal dari konfigurasi aplikasi.
Ketika pelanggan mencoba untuk membeli produk, ia meminta detail melalui formulir HTML untuk melanjutkan checkout.
Selain itu, kode contoh ini menggunakan jQuery untuk memvalidasi data formulir checkout. Juga, 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 ada
Ada banyak platform eCommerce yang ada di pasar.
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-nilai dalam aspek ketergantungan.
Platform yang ada mencakup perusahaan yang ukurannya bervariasi. Kita harus memilih yang cocok di antara opsi yang banyak berdasarkan ukuran kita.
Jika bisnisnya terlalu unik dan bersih dalam kesederhanaannya, maka kustomisasi sendiri adalah yang terbaik.
Keuntungan dari situs web eCommerce yang disesuaikan
Ada beberapa keuntungan menyesuaikan situs web eCommerce daripada bergantung pada platform pihak ketiga mana pun.
- Ukuran dan kerumitan aplikasi akan kecil dan mudah dirawat.
- Sangat mudah untuk mengelola, mencadangkan, memigrasikan 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 arahan yang dibuat untuk contoh ini.
Ini termasuk cuplikan PHP di awal. Setelah itu, ia memiliki HTML untuk menampilkan hanya satu 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, ia 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 wadah 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 untuk mengirim permintaan ke server.
Itu validasiPengguna() 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.
assets/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.!#$%&'*+/=?^_`{|}~-]+@[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 mengatur detail produk dalam array yang ditampilkan di halaman beranda secara dinamis.
Ini memiliki konstanta DISPLAY_QUANTITY_INPUT yang merupakan flag yang 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 <vincy@phppot.com>
*/
namespace Phppot;
/**
* This class contains the configuration options
*/
class Config
{
const ADMIN_EMAIL = 'admin@gmail.com';
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 titik akhir PHP dari permintaan AJAX. Ini menerima pelanggan dan rincian pesanan dan memasukkan entri pesanan ke dalam database.
Ini menginstansiasi kelas CheckoutService untuk mengakses pesanan dan database pesanan-item.
Setelah menempatkan pesanan, itu memanggil MailService untuk mengirim konfirmasi pesanan melalui email.
Dalam contoh ini, ia mengirimkan email konfirmasi pesanan ke pelanggan. Juga, ia mengirim 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 <vincy@phppot.com>
*/
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 kelas CheckoutService di PHP.
Ini mempersiapkan kueri untuk menyisipkan dan membaca entri pesanan dan item pesanan.
Juga, ini mencakup beberapa fungsi utilitas untuk menghasilkan token hash untuk menggunakannya 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 <vincy@phppot.com>
*/
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 mendefinisikan fungsi secara terpisah untuk mengirim email pelanggan dan Admin pada pesanan yang ditempatkan.
Ini menggunakan fungsi PHP mail() untuk mengirim email. Anda dapat mengintegrasikan PHPMailer atau perpustakaan lain sebagai gantinya. Jika Anda ingin kode untuk mengirim email menggunakan PHPMailer melalui SMTP, tutorial tertaut akan memiliki 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 basis data
--
-- 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 yang mengumpulkan detail pelanggan untuk pembayaran email.
Ini adalah teks respons yang dikembalikan setelah memproses permintaan checkout AJAX. Ini menampilkan id referensi pesanan untuk menindaklanjuti contoh pembelian di masa mendatang.
Unduh
Kembali ke Atas
Source link
