كيفية استخدام HTML, CSS, JS أو Vue.js و React لعمل فاتورة؟

Hanan Fahad2 · 15 أبريل 2023

لما اضعط add item

يطلع لي صف لاضافة منتجات ويحب المجموع الكلي نفس كذا كيف اسويها بالجافاسكربت

تم التعديل في 15 أبريل 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Kais Hasan · 15 أبريل 2023

يمكنك إضافة السطر عن طريق الاستماع إلى حدث الضغط على زر الإضافة و عندك ذلك تنفيذ كود الإضافة، كود الإضافة يكون مجرد إضافة القالب المكتوب بال html إلى عنصر اللائحة.

سأعطيك مثال بسيط يمكنك تعلم الفكرة منه و محاولة تطبيقها في التطبيق الخاص بك.

سأوضح فكرة كيفية إضافة عنصر عن طريق برنامج todo list بسيط جداً، يمكننا كتابة ال html كما يلي:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <input type="text" id="add-text" />
        <button type="input" id="add-btn">Add</button>
        <br />
        <ul id="todo-list"></ul>

        <script src="./add_li.js"></script>
    </body>
</html>

هنا لدينا مربع نصي للإدخال و زر لإضافة ما تم كتابته في المربع النصي و عنصر ul ليحمل عناصر اللائحة.

و يكون كود الجافا سكربت كما يلي:

const addBtn = document.getElementById("add-btn");
const addText = document.getElementById("add-text");
const todoList = document.getElementById("todo-list");

document.addEventListener("DOMContentLoaded", function (e) {
    addBtn.addEventListener("click", function (e) {
        let text = addText.value;
        if (text) {
            let newTask = document.createElement('li');
            newTask.textContent = text;
            todoList.appendChild(newTask);
        }
        
    });
});

هنا نقوم في البداية بجلب المكونات التي نتعامل معها، ثم نستمع إلى حدث تحميل مكونات الصفحة.

بعد ذلك نستمع إلى حدث الضغط على زر الإضافة، و في تلك الحالة نجلب النص من المربع النصي.

في حال كان النص غير فارغ نقوم بإنشاء مكون li جديد و نضع النص الخاص به هو النص المدخل في المربع النصي، ثم نضيفه إلى اللائحة.

هذا الشكل العام لهكذا عمل، طبعاً هنا الكود بسيط و أي إعادة تحميل للصفحة سيتم محو كافة التعديلات، حيث يجب أن يكون هناك كود إضافة يرسل التعديلات إلى سيرفر يحتفظ بها.

أما عن جمع القيم فهو أيضاً له نفس الطريقة العامة، أي نقوم بإنشاء زر ليقوم بهذه الوظيفة و نستمع لحدث الضغط عليه، و في تلك الحالة نمر على الأبناء لللائحة و نستخرج كل سعر و نجمعه إلى متغير يخزن المجموع الكلي.

بالطبع ينصح بأن تستعمل إحدى أطر العمل لل frontend بدلاً من كتابة كل ذلك لوحدك، دائماً ما يكون هنالك طريقة أسهل بكثير.

Mustafa Suleiman · 15 أبريل 2023

سأشرح لك من خلال خطوات بسيطة:

1- إنشاء شكل HTML للفاتورة، باستخدام عناصر HTML المختلفة لتحديد تفاصيل الفاتورة مثل الشعار وتاريخ الفاتورة ومجموع الفاتورة وقائمة المنتجات.

2- إنشاء مصفوفة JavaScript لتخزين تفاصيل المنتجات، حيث يتم تخزين تفاصيل كل منتج في صف منفرد في المصفوفة، مثل اسم المنتج والكمية والسعر.

3- إنشاء دالة JavaScript لإضافة منتج جديد إلى المصفوفة، لتحديد الصف الذي يجب إضافة المنتج إليه في المصفوفة، ثم إضافة التفاصيل الخاصة بالمنتج إلى هذا الصف.

4- إنشاء دالة JavaScript لحساب مجموع الفاتورة بناءً على قائمة المنتجات الموجودة في المصفوفة، ويتم حساب المجموع الإجمالي عن طريق ضرب كمية المنتج بسعره وجمع قيم الناتج لكل المنتجات.

5- ربط الشكل HTML بدوال JavaScript المناسبة، عن طريق استخدام العناصر HTML المختلفة مثل الأزرار وحقول الإدخال وتعيين وظائف JavaScript لهذه العناصر لتنفيذ العمليات المطلوبة على المصفوفة وحساب مجموع الفاتورة.

مثال بسيط.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Invoice</title>
    <script defer src="invoice.js"></script>
  </head>
  <body>
    <h1>Invoice</h1>
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="product-list">
    <!-- products will be added dynamically here -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total:</td>
      <td id="total">0</td>
    </tr>
  </tfoot>
</table>
<button id="add-item">Add Item</button>
</body>
</html>

JavaScript:

// تعريف المصفوفة الفارغة لتخزين المنتجات
const products = [];

// دالة لإضافة منتج إلى المصفوفة
function addProduct() {
  // الحصول على تفاصيل المنتج من مدخلات المستخدم
  const name = prompt("Enter product name:");
  const quantity = parseInt(prompt("Enter quantity:"));
  const price = parseFloat(prompt("Enter price per unit:"));

  // إضافة المنتج إلى المصفوفة
  products.push([name, quantity, price]);

  // عرض قائمة المنتجات المحدثة
  const productList = document.getElementById("product-list");
  const row = document.createElement("tr");
  row.innerHTML = `<td>${name}</td><td>${quantity}</td><td>${price}</td>`;
  productList.appendChild(row);

  // حساب وعرض السعر الإجمالي
  const total = products.reduce((acc, curr) => acc + curr[1] * curr[2], 0);
  const totalElement = document.getElementById("total");
  totalElement.innerHTML = total.toFixed(2);
}

// إلحاق مستمع الحدث بزر "Add Item"
const addItemButton = document.getElementById("add-item");
addItemButton.addEventListener("click", addProduct);

في المثال، قمت بإنشاء شكل HTML للفاتورة يحتوي على جدول يعرض قائمة المنتجات ومجموع الفاتورة، بالإضافة إلى زر لإضافة منتج جديد، وربط الزر بدالة JavaScript التي تطلب من المستخدم إدخال تفاصيل المنتج الجديد، ثم تقوم بإضافة المنتج إلى المصفوفة وتحديث الجدول ومجموع الفاتورة.

ومن الأسهل القيام بذلك عن طريق استخدام إطار عمل مثل Vue.js وهو ما أنصحك به لكونك تقومين حاليًا بتعلم PHP ولارافيل، لكونه متوافق بشكل كبير مع إطار لارافيل.

وإليك نفس المثال باستخدام Vue.js.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Invoice with Vue.js</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <h1>Invoice with Vue.js</h1>
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(product, index) in products" :key="index">
            <td>{{ product.name }}</td>
            <td>{{ product.quantity }}</td>
            <td>{{ product.price }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2">Total:</td>
            <td>{{ total }}</td>
          </tr>
        </tfoot>
      </table>
      <button @click="addProduct">Add Item</button>
    </div>
    <script src="invoice.js"></script>
  </body>
</html>

JavaScript:

const app = Vue.createApp({
  data() {
    return {
      products: [],
    }
  },
  methods: {
    addProduct() {
      const name = prompt("Enter product name:");
      const quantity = parseInt(prompt("Enter quantity:"));
      const price = parseFloat(prompt("Enter price per unit:"));
      const product = { name, quantity, price };
      this.products.push(product);
    }
  },
  computed: {
    total() {
      return this.products.reduce((total, product) => {
        return total + product.price * product.quantity;
      }, 0);
    }
  }
});

app.mount('#app');

في المثال قمت ببناء تطبيق Vue.js باستخدام Vue.createApp وتم تعريف بيانات الـ data بحيث تكون القائمة الفارغة في البداية.

وإنشاء دالة addProduct للتعامل مع إضافة منتج جديد بمجرد النقر على الزر "Add Item"، وباستخدام this.products.push تتم إضافة المنتج الجديد إلى القائمة.

وتم إنشاء الحساب المرتجع باستخدام computed property لحساب المجموع الكلي للمنتجات باستخدام reduce.

بعد ذلك، يتم ربط العنصر "product-list" في الجدول باستخدام v-for لإنشاء عنصر tr لكل منتج في القائمة.

ثم استخدام @click للتعامل مع الحدث عند النقر على الزر "Add Item". تم ربط الزر بدالة `addProduct.

وأخيرًا، حساب المجموع الإجمالي باستخدام الدالة calculateTotal التي تقوم بجمع حاصل ضرب الكمية بالسعر لكل منتج في المصفوفة products.

وعرض المجموع الإجمالي في العنصر <span> المحدد بواسطة id="total".

عبدالباسط ابراهيم · 15 أبريل 2023

يمكنك تنفيذ المطلوب بالعديد من الوسائل والطرق ولكن الأسهل والأفضل هو استخدام إطار عمل لل javascript مثلاً react والتالي هو مثال

عند الضغط على زر "Add Item"، يجب أن تقوم بقراءة القيم الحالية لحقول الإدخال (اسم المنتج، الكمية، السعر) وإضافتها إلى قائمة العناصر items باستخدام دالة setItems. بعد ذلك، يمكنك استدعاء دالة handleTotal لإعادة حساب المجموع الإجمالي بناءً على العناصر الجديدة التي تمت إضافتها.

لتحقيق ذلك، يمكنك استخدام الدالة handleAddItem كما يلي:

const handleAddItem = () => {
  const itemName = document.getElementById('new-item').value;
  const quantity = document.getElementById('quantity').value;
  const price = document.getElementById('price').value;
  const newItem = { name: itemName, quantity: parseInt(quantity), price: parseFloat(price) };
  setItems([...items, newItem]);
  handleTotal();
};

بالتأكيد لا تنسى تعريف المتغيرات اللازمة للتطبيق

كما أن الدالة handleTotal ستكون مثل تلك الأكواد

 const handleTotal = () => {
    let sum = 0;
    for (let i = 0; i < items.length; i++) {
      sum += parseFloat(items[i].price) * items[i].quantity;
    }
    setTotal(sum);
  };

ثانياً

إضافة حقول الإدخال والزر الخاص بإضافة المنتج، كما يلي:

<div>
  <label htmlFor="new-item">New Item: </label>
  <input type="text" id="new-item" />
  <label htmlFor="quantity">Quantity: </label>
  <input type="number" id="quantity" />
  <label htmlFor="price">Price: </label>
  <input type="number" id="price" step="0.01" />
  <button onClick={handleAddItem}>Add Item</button>
</div>

تقوم هذه الأكواد بإنشاء حقول الإدخال لإضافة اسم المنتج والكمية والسعر، وزر "Add Item" الذي يقوم بتشغيل الدالة handleAddItem عند النقر عليه.

المثال السابق يوضح الخطوات ولكن سيتم التعديل على الأكواد حتى تتناسب مع التطبيق الخاص بك

كما أن يفضل الإطلاع على المشاريع الموجودة ب github ويمكن البحث عن invoice generator + اللغة المناسبة كما في هذا المشروع

كيفية استخدام HTML, CSS, JS أو Vue.js و React لعمل فاتورة؟

السؤال

Hanan Fahad2

3 أجوبة على هذا السؤال

Recommended Posts

Kais Hasan

Mustafa Suleiman

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية