මොඩියුලය 6

විකුණුම් ස්ථානය (Point of Sale - POS) බිල්පත් පද්ධතිය


1 AJAX සමඟ ගතික අතුරුමුහුණතක්

POS පද්ධතියක වේගවත් බව ඉතා වැදගත් වේ. සෑම ක්‍රියාවකදීම පිටුව නැවත පූරණය (page reload) වීම පරිශීලකයාට අපහසුතාවයක් ඇති කරයි. මෙය වළක්වා ගැනීමට අපි AJAX (Asynchronous JavaScript and XML) භාවිතා කරමු.

AJAX මගින් වෙබ් පිටුවේ සිට සර්වර් එකට පසුබිමින් (in the background) දත්ත ඉල්ලීම් යැවීමට සහ ලබාගැනීමට හැකිය. මේ නිසා පිටුව reload නොවී අන්තර්ගතය යාවත්කාලීන කළ හැක.

ක්‍රියාවලිය:
  1. JavaScript Event: පරිශීලකයෙක් සෙවුම් කොටුවේ යමක් ටයිප් කරයි.
  2. AJAX Request: JavaScript මගින් එම සෙවුම් පදය PHP ගොනුවකට යවයි.
  3. Server-Side Processing: PHP ගොනුව දත්ත සමුදාය විමසා (query) ප්‍රතිඵල ලබා ගනී.
  4. JSON Response: PHP ගොනුව එම ප්‍රතිඵල JSON (JavaScript Object Notation) ආකාරයට JavaScript වෙත ආපසු එවයි.
  5. DOM Update: JavaScript මගින් එම JSON දත්ත ලබාගෙන HTML පිටුවේ අදාළ කොටස (උදා: සෙවුම් ප්‍රතිඵල ලැයිස්තුව) යාවත්කාලීන කරයි.
2 විකිණීමක් දත්ත සමුදායේ සටහන් කිරීම

පරිශීලකයා "Complete Sale" බොත්තම එබූ විට, JavaScript මගින් සම්පූර්ණ බිල්පතේ (cart) තොරතුරු (නිෂ්පාදන ID, ප්‍රමාණය, උප එකතුව) PHP ගොනුවකට යවයි. PHP ගොනුව එම දත්ත ලබාගෙන දත්ත සමුදායේ මෙහෙයුම් කිහිපයක් සිදු කරයි.

දත්ත සමුදා ගනුදෙනු (Database Transactions): මෙම මෙහෙයුම් සියල්ලම එකවර සාර්ථක වීම හෝ එකක් අසාර්ථක වුවහොත් සියල්ලම අහෝසි වීම (rollback) ඉතා වැදගත්ය. උදාහරණයක් ලෙස, `sales` වගුවේ සටහන් වී `products` වගුවේ තොගය අඩු නොවුවහොත් දත්ත නොගැලපීමක් සිදු වේ. මේ සඳහා Database Transactions භාවිතා කරයි.

PHP මගින් සිදුවන පියවර:
  • පියවර A: `sales` වගුවට නව විකිණීමක් ඇතුළත් කර (`INSERT`) එම විකිණීමේ ID එක (`sale_id`) ලබා ගැනීම.
  • පියවර B: බිල්පතේ ඇති සෑම භාණ්ඩයක් සඳහාම, `sale_items` වගුවේ නව පේළියක් (`INSERT`) ලෙස ඇතුළත් කිරීම (මෙහිදී ඉහත `sale_id` එක භාවිතා වේ).
  • පියවර C: එම සෑම භාණ්ඩයක් සඳහාම, `products` වගුවේ ඇති තොග ප්‍රමාණය (`quantity`) විකිණූ ප්‍රමාණයෙන් අඩු කිරීම (`UPDATE`).

⭐ ප්‍රායෝගික පැවරුම: සම්පූර්ණ POS බිල්පත් පිටුව නිර්මාණය කිරීම

මෙම කාර්යය සඳහා අපට ගොනු තුනක් ප්‍රධාන වශයෙන් අවශ්‍ය වේ: HTML/JS අතුරුමුහුණත, නිෂ්පාදන සෙවීමට PHP ගොනුවක්, සහ විකිණීම සටහන් කිරීමට PHP ගොනුවක්.

පියවර 1: POS අතුරුමුහුණත (`pos.php`)

මෙය ප්‍රධාන පිටුවයි. Bootstrap grid system භාවිතයෙන් වම්පස නිෂ්පාදන සෙවීමටත්, දකුණුපස බිල්පත (cart) සහ ගෙවීම් විස්තර සඳහාත් ලෙස කොටස් දෙකකට වෙන්කර සාදන්න. සියලුම JavaScript කේතය මෙම ගොනුවේම ඇතුළත් කරන්න.

<!-- pos.php --> <!DOCTYPE html> <html> <head><title>Point of Sale</title></head> <body> <div class="container-fluid"> <div class="row"> <!-- Product Search & Results Column --> <div class="col-md-5"> <h3>Find Product</h3> <input type="text" id="search" class="form-control" placeholder="Search by name or code..."> <div id="search-results" class="mt-2"></div> </div> <!-- Cart & Billing Column --> <div class="col-md-7"> <h3>Billing Cart</h3> <table class="table"> <thead><tr><th>Product</th><th>Price</th><th>Qty</th><th>Total</th><th>Action</th></tr></thead> <tbody id="cart-items"></tbody> </table> <h4>Grand Total: <span id="grand-total">0.00</span></h4> <!-- Payment fields and Complete Sale button --> </div> </div> </div> <script> // JAVASCRIPT CODE WILL GO HERE // 1. Event listener for the search input (on keyup) // 2. Function to send AJAX request to search_products.php // 3. Function to add item to a JavaScript cart array and update the HTML table // 4. Function to calculate totals in real-time // 5. Function to send final cart data to process_sale.php </script> </body> </html>

පියවර 2: නිෂ්පාදන සෙවීමේ AJAX ගොනුව (`ajax_search_products.php`)

මෙම PHP ගොනුව JavaScript වෙතින් සෙවුම් පදයක් (`term`) ලබාගෙන, දත්ත සමුදායෙන් ඊට ගැලපෙන නිෂ්පාදන සොයා JSON ලෙස ආපසු යවයි.

<?php // ajax_search_products.php include 'includes/db_connect.php'; $term = $_GET['term'] . '%'; $stmt = $conn->prepare("SELECT id, name, price FROM products WHERE name LIKE ? AND quantity > 0 LIMIT 10"); $stmt->bind_param("s", $term); $stmt->execute(); $result = $stmt->get_result(); $products = []; while($row = $result->fetch_assoc()){ $products[] = $row; } header('Content-Type: application/json'); echo json_encode($products); ?>

පියවර 3: විකිණීම සටහන් කිරීමේ AJAX ගොනුව (`ajax_process_sale.php`)

මෙම PHP ගොනුව JavaScript වෙතින් බිල්පතේ දත්ත (JSON string එකක් ලෙස) ලබාගෙන, ඉහත විස්තර කළ Database Transaction එක සිදුකරයි.

<?php // ajax_process_sale.php session_start(); include 'includes/db_connect.php'; // Get JSON data from the POST request $cart_data = json_decode(file_get_contents('php://input'), true); mysqli_begin_transaction($conn); try { // Step A: Insert into sales table // ... $sale_id = mysqli_insert_id($conn); // Step B & C: Loop through cart items foreach ($cart_data['items'] as $item) { // B: Insert into sale_items table // C: Update product quantity in products table } mysqli_commit($conn); echo json_encode(['success' => true, 'message' => 'Sale completed!']); } catch (mysqli_sql_exception $exception) { mysqli_rollback($conn); echo json_encode(['success' => false, 'message' => 'Sale failed!']); } ?>

මෙම මොඩියුලය සාර්ථකව නිම කිරීමෙන් පසු, ඔබට සුපිරි වෙළඳසැලක මූලිකම අවශ්‍යතාවය වන බිල්පත් පද්ධතිය නිර්මාණය කර ගැනීමට හැකිවනු ඇත.

‹‹ පෙර මොඩියුලය (Module 5) ඊළඟ මොඩියුලය (Module 7) ››