আগের পর্বে আমরা ব্রাউজারে প্রোডাক্ট লিস্ট টেবিল দেখতে পেরেছি। কিন্তু নতুন প্রোডাক্ট যোগ করতে গেলে এখনো curl ব্যবহার করতে হয়। আজ আমরা টেবিল পেজেই একটি ইনপুট ফর্ম যোগ করবো, যাতে তুমি সরাসরি ব্রাউজার থেকে নাম, দাম, স্টক লিখে "যোগ করুন" বাটনে ক্লিক করলেই প্রোডাক্ট যোগ হয়ে যাবে এবং টেবিল আপডেট হবে।

ফর্ম + API = ডায়নামিক UI

এখন পর্যন্ত আমরা যে ওয়েবপেজ বানিয়েছি, সেটা ছিল "পড়ার জন্য"—শুধু ডেটা দেখাত। আজ আমরা সেটাকে "লেখার জন্য" প্রস্তুত করব। ফর্ম দিয়ে ইউজার ডেটা দেবে, JavaScript সেটা API-তে পাঠাবে, API ডেটা সেভ করবে, আর টেবিল নতুন ডেটা নিয়ে আপডেট হবে—সব রিয়েল-টাইমে!

আগেএখন
curl দিয়ে POST করতে হতোব্রাউজারে ফর্ম পূরণ করেই POST হবে
টেবিল রিফ্রেশ করতে হতো ম্যানুয়ালিপ্রোডাক্ট যোগ হওয়ার সাথে সাথে টেবিল আপডেট হবে

ধাপ ১: products.html ওপেন করো

cd ~/shop-api/public
micro products.html

ধাপ ২: ফর্মের জন্য CSS যোগ করো

তোমার <style> ট্যাগের ভেতরে এই স্টাইলগুলো যোগ করো (শেষের দিকে):

.add-form {
  background: var(--table-bg);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.form-group { margin-bottom: 0.75rem; }
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.form-group input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 1rem;
}
.btn-submit {
  background: #2563eb;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
}
.btn-submit:hover { background: #1d4ed8; }

ধাপ ৩: ফর্ম HTML যোগ করো

টেবিলের উপরে (<div class="table-wrapper">-এর ঠিক আগে) এই HTML যোগ করো:

<div class="add-form">
  <h2>➕ নতুন প্রোডাক্ট যোগ করুন</h2>
  <div class="form-group">
    <label>📌 প্রোডাক্টের নাম</label>
    <input type="text" id="nameInput" placeholder="যেমন: সাবান" required>
  </div>
  <div class="form-group">
    <label>💰 মূল্য (টাকা)</label>
    <input type="number" id="priceInput" placeholder="যেমন: 25" min="1" required>
  </div>
  <div class="form-group">
    <label>📦 স্টক</label>
    <input type="number" id="stockInput" value="0" min="0">
  </div>
  <button class="btn-submit" onclick="addProduct()">➕ যোগ করুন</button>
</div>

ধাপ ৪: addProduct() ফাংশন যোগ করো

তোমার <script> ট্যাগের ভেতরে, loadProducts() ফাংশনের নিচে এই নতুন ফাংশনটি যোগ করো:

async function addProduct() {
  const name = document.getElementById('nameInput').value.trim();
  const price = parseFloat(document.getElementById('priceInput').value);
  const stock = parseInt(document.getElementById('stockInput').value) || 0;

  if (!name || isNaN(price) || price <= 0) {
    alert('❌ নাম এবং সঠিক মূল্য দেওয়া আবশ্যক!');
    return;
  }

  const newProduct = { name, price, stock };

  try {
    const res = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newProduct)
    });

    if (!res.ok) {
      const err = await res.json();
      alert('❌ ' + err.message);
      return;
    }

    // সফল হলে ইনপুট ফাঁকা করো
    document.getElementById('nameInput').value = '';
    document.getElementById('priceInput').value = '';
    document.getElementById('stockInput').value = '0';

    // টেবিল আপডেট করো
    loadProducts();
    alert('✅ প্রোডাক্ট যোগ করা হয়েছে!');
  } catch (error) {
    alert('❌ নেটওয়ার্ক সমস্যা! সার্ভার চালু আছে তো?');
  }
}

একটা ছোট্ট কাজ: <script> ট্যাগের শুরুতেই এই লাইনটি যোগ করো (যাতে API_URL ডিফাইন থাকে):

const API_URL = '/products';

লাইন-বাই-লাইন ব্যাখ্যা

লাইনকী করছে?সহজ ভাষায়
getElementById(...).valueইনপুট থেকে ভ্যালু পড়ছে"ইউজার কী টাইপ করেছে"
if (!name || ...)ভ্যালিডেশন চেক"নাম আর দাম তো দিয়েছো তো?"
fetch(API_URL, { method:'POST' })সার্ভারে POST রিকোয়েস্ট"এই নতুন প্রোডাক্টটা রাখো"
JSON.stringify(newProduct)JS অবজেক্ট → JSON"জাভাস্ক্রিপ্টের ভাষা থেকে JSON-এ"
.value = ''ইনপুট ফাঁকা করছে"পরের প্রোডাক্টের জন্য জায়গা তৈরি"
loadProducts()টেবিল আপডেট"নতুন লিস্টটা দেখাও"

ধাপ ৫: সার্ভার চালু করে টেস্ট করো

node server.js
termux-open-url http://localhost:3000/products.html

এখন ব্রাউজারে গিয়ে ফর্ম পূরণ করে "যোগ করুন" বাটনে ক্লিক করলেই নতুন প্রোডাক্ট টেবিলে চলে আসবে!

আজ তুমি কী শিখলে

  • HTML ফর্ম — ইউজার থেকে ইনপুট নেওয়া
  • JavaScript DOM — ইনপুট ফিল্ড থেকে ভ্যালু পড়া ও লেখা
  • fetch POST — ব্রাউজার থেকে API কল করে ডেটা পাঠানো
  • ভ্যালিডেশন — ফাঁকা বা ভুল ডেটা আটকানো
  • রিয়েল-টাইম UI আপডেট — ডেটা যোগ হওয়ার সাথে সাথে টেবিল রিফ্রেশ
  • ইউজার ফিডব্যাক — alert দিয়ে সফল/ব্যর্থ জানানো

পরবর্তী পর্বে আমরা শিখবো বিলিং সিস্টেম — কীভাবে প্রোডাক্ট সার্চ করে কার্টে যোগ করে বিল তৈরি করতে হয়। এটাই হবে আমাদের দোকানের সবচেয়ে দরকারি ফিচার!

In the previous episode, we displayed the product list in a browser table. But adding new products still requires curl. Today we'll add an input form to the table page, so you can add new products directly from the browser—just type the name, price, and stock, click "Add", and the table updates instantly!

Form + API = Dynamic UI

BeforeNow
POST via curlPOST via browser form
Manual table refreshAuto table update

Step 1: Open products.html

cd ~/shop-api/public
micro products.html

Step 2: Add CSS, HTML form & JavaScript function

Add the form HTML above the table, the CSS styles, and the addProduct() JavaScript function that sends a POST request to your API.

Step 3: Test

node server.js
termux-open-url http://localhost:3000/products.html

Next episode: Billing System — search products, add to cart, and create bills. The most useful feature of our shop!

← পূর্ববর্তী ← Previous
🏠 হোম 🏠 Home
পরবর্তী → Next →