عرض نتائج البحث باستخدام رقم الجلوس من ملف Excel على موقع الويب باستخدام JavaScript

وديعة الله · 29 يونيو 2023

صممت موقع ويب ونبى نعرض النتيجه بالبحث برقم الجلوس من ملف اكسل

نبى كود جافا

وبارك الله فيكم

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

Mustafa Suleiman · 29 يونيو 2023

هل المقصود كود جافاسكريبت؟

عمر قره محمد · 29 يونيو 2023

اعتقد انك تقصدين جافاسكريبت وليس جافا، وذلك لأن جافا لن تعمل على المتصفح، ويمكنك عرض البيانات باستخدام الـ js عن طريق مكتبة مثل SheetJS وهذا مثال بسيط عن كيفية فعل ذلك :

<!DOCTYPE html>
<html>
  <head>
    <title>Excel to Table</title>
    <!-- تعريف قواعد CSS لتنسيق الجدول وتغيير خلفية الصفحة والجدول ولون الخطوط -->
    <style>
      body {
        background-color: black;
      }

      table {
        width: 100%;
        background-color: black;
        color: #fff;
        margin-top: 1em;
      }

      td {
        border: 1px solid red;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- إنشاء عنصر input من نوع file وتحديد نوع الملفات المسموح بها -->
    <input type="file" id="input" accept=".xls,.xlsx" />
    <!-- تضمين مكتبة SheetJS باستخدام عنصر script ورابط CDN -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
    <script>
      // إنشاء مستمع لحدث change على عنصر الإدخال
      const input = document.getElementById('input');
      input.addEventListener('change', handleFileSelect);

      // دالة للتعامل مع الملف المحدد
      function handleFileSelect(event) {
        // قراءة الملف المحدد باستخدام FileReader
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
          // قراءة البيانات من الملف باستخدام SheetJS
          const data = e.target.result;
          const workbook = XLSX.read(data, {type: 'binary'});
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          // تحويل البيانات إلى مصفوفة من الصفوف
          const rows = XLSX.utils.sheet_to_json(sheet, {header: 1});
          // إنشاء جدول HTML وإضافة الصفوف والخلايا إليه
          createTable(rows);
        };
        reader.readAsBinaryString(file);
      }

      // دالة لإنشاء جدول HTML وإضافة الصفوف والخلايا إليه
      function createTable(rows) {
        const table = document.createElement('table');
        rows.forEach(function(row) {
          const tr = document.createElement('tr');
          row.forEach(function(cell) {
            const td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
          });
          table.appendChild(tr);
        });
        document.body.appendChild(table);
      }
    </script>
  </body>
</html>

Mustafa Suleiman · 29 يونيو 2023

ما فهمته هو أنك تريدين عرض النتائج بحسب رقم الجلوس من ملف Excel في موقع الويب باستخدام JavaScript، ولفعل ذلك يلزم استخدام مكتبة تعامل مع ملفات Excel مثل xlsx أو exceljs.

وإليك مثال:

أولاً عليك تضمين مكتبة xlsx في صفحة HTML كالتالي:

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

ثم إنشاء واجهة مستخدم بسيطة لإدخال رقم الجلوس وزر البحث في ملف HTML أيضًا:

<input type="text" id="seatNumber" placeholder="رقم الجلوس">
<button onclick="searchResult()">ابحث</button>

وإضافة وظيفة searchResult() إلى النص البرمجي للصفحة للقيام بالبحث وعرض النتيجة:

const searchResult = async () => {
  const seatNumber = document.getElementById('seatNumber').value;

  try {
    const response = await fetch('path/to/your/excel/file.xlsx');
    const arrayBuffer = await response.arrayBuffer();

    const data = new Uint8Array(arrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });

    // قم بقراءة ورقة العمل الأولى
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // حول البيانات إلى كائن JSON
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    // البحث عن رقم الجلوس
    const result = jsonData.find(row => row['رقم الجلوس'] === seatNumber);

    // عرض النتيجة
    if (result) {
      alert('تم العثور على الجلوس!');
      console.log(result);
    } else {
      alert('لم يتم العثور على الجلوس!');
    }
  } catch (error) {
    console.error(error);
  }
};

ولكي يعمل السكريبت عليك بتضمينه بعد استيراد مكتبة XLSX كالتالي:

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script defer src="index.js"></script>

وقمت باستخدام خاصية defer من أجل ضمان تشغيل السكريبت بعد تحميل عناصر HTML.

Adnane Kadri · 29 يونيو 2023

رغم أن المرجح هو ما أشار اليه عمر ومصطفى في التعليقات السابقة بخصوص جافاسكربت بدل جافا كفلترة على الواجهة الأمامية، إلا أنك ان كنت تستخدم جافا كلغة واجهة خلفية وتريد التعامل مع عملية الفلترة من المكتبة الخلفية، يمكنك استخدام مكتبة Apache POI للتعامل مع ملفات Excel في Java. هنا هو مثال بسيط لكيفية قراءة ملف Excel وعرض النتيجة باستخدام رقم الجلوس:

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;

import java.io.FileInputStream;
import java.io.IOException;

public class ExcelReader {
    public static void main(String[] args) {
        String filePath = "path/to/your/excel/file.xlsx";
        String searchValue = "12345"; // رقم الجلوس المطلوب البحث عنه

        try (FileInputStream fileInputStream = new FileInputStream(filePath);
             Workbook workbook = new XSSFWorkbook(fileInputStream)) {

            Sheet sheet = workbook.getSheetAt(0); // استخراج ورقة العمل الأولى

            for (Row row : sheet) {
                Cell cell = row.getCell(0); // استخراج الخلية الأولى في كل صف (قم بتعديلها حسب هيكل ملف Excel الخاص بك)
                String value = cell.getStringCellValue();

                if (value.equals(searchValue)) {
                    // تم العثور على النتيجة المطلوبة
                    System.out.println("تم العثور على النتيجة!");
                    // يمكنك عرض البيانات الأخرى في الصف حسب احتياجاتك
                    // مثلاً: Cell otherCell = row.getCell(1);
                    // String otherValue = otherCell.getStringCellValue();
                    // System.out.println("قيمة أخرى: " + otherValue);
                    break;
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

قم بوضع رقم الجلوس كقيمة للمتغير searchValue ومسار الملف مكان filePath وشغل البرنامج.

بلال زيادة · 29 يونيو 2023

بالطبع! يمكنك استخدام JavaScript لقراءة بيانات Excel وعرض النتيجة بناءً على رقم الجلوس. يتطلب ذلك استخدام مكتبة JavaScript لقراءة ملفات Excel مثل xlsx أو SheetJS، والتلاعب بالبيانات المستخرجة. هنا مثال بسيط يستخدم مكتبة SheetJS لقراءة ملف Excel وعرض النتيجة:

<!DOCTYPE html>
<html>
<head>
  <title>قراءة ملف Excel باستخدام JavaScript</title>
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
  <input type="file" id="excel-file" accept=".xlsx" />
  <button onclick="searchResult()">بحث</button>
  <div id="result"></div>

  <script>
    function searchResult() {
      var input = document.getElementById('excel-file');
      var file = input.files[0];
      var reader = new FileReader();

      reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});
        var worksheet = workbook.Sheets[workbook.SheetNames[0]];

        // تحديد الخلية التي تحتوي على رقم الجلوس (على سبيل المثال، الخلية A1)
        var cell = worksheet.A1;
        var seatNumber = cell ? cell.v : '';

        // عرض النتيجة
        var resultElement = document.getElementById('result');
        resultElement.textContent = 'رقم الجلوس: ' + seatNumber;
      };

      reader.readAsArrayBuffer(file);
    }
  </script>
</body>
</html>

في هذا المثال، يتم إنشاء إدخال ملف لتحديد ملف Excel، ثم يتم تعيين دالة searchResult() كمعالج لزر البحث. عند النقر على الزر، يتم قراءة محتويات الملف باستخدام FileReader ومكتبة xlsx، ثم يتم استخراج قيمة الخلية التي تحتوي على رقم الجلوس وعرضها في عنصر النتيجة.

يرجى ملاحظة أن هذا مثال بسيط يستخدم مكتبة SheetJS لقراءة الملفات، وقد تحتاج إلى تعديله وفقًا لاحتياجات مشروعك. كما يجب تضمين مكتبة xlsx في صفحة HTML الخاصة بك عن طريق استخدام عنصر النص <script> ووضع الرابط الصحيح لملف xlsx.full.min.js.

وديعة الله · 29 يونيو 2023

انا طالبة ...ونخدم في مشروع تخرج

اى صح نقصد جافا سكيبت

جزاكم الله خير ع الرد ...واذا ممكن حد منكم يخليلى رقمه تلواتس نتواصل معه حتى نكمل مشروعى نكون ممنونة

عرض نتائج البحث باستخدام رقم الجلوس من ملف Excel على موقع الويب باستخدام JavaScript

السؤال

وديعة الله

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

Recommended Posts

Mustafa Suleiman

عمر قره محمد

Mustafa Suleiman

Adnane Kadri

بلال زيادة

وديعة الله

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية