التعامل مع جداول Excel من خلال تطبيق ويب

وديعة الله · 13 سبتمبر 2023

السلام عليكم

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

تم التعديل في 13 سبتمبر 2023 بواسطة سمير عبود
تعديل العنوان

سمير عبود · 13 سبتمبر 2023

إن كان الهدف بناء صفحة ويب، بإمكانك الإعتماد على لغة برمجة و إطار عمل خفيف خاص بها يستعمل في مجال تطوير الويب، مثلاً يُمكنك الإعتماد على لغة بايثون و إطار Flask مع بعض المكتبات التي تتيح التعامل مع البيانات و جداول excel.

إن لم تكن لديك خبرة في التعامل مع إطار Flask يُمكنك الإطلاع على Flask 101 و هي سلسلة مقالات بسيطة تُعرف بالإطار و بعض المفاهيم فيه.

مكتبة openpyxl للتعامل مع ملفات Excel القراءة منها و التعديل عليها.

مكتبة pandas و هي مكتبة غنية عن التعريف في بايثون للتعامل مع البيانات و تحليلها، يُمكن قراءة البيانات فيها من ملفات Excel، JSON، CSV و غيرها، ثم تحليل تلك البيانات حسب المطلوب

إن لم ترغب في إستخدام Flask فيُمكن أيضاً إستخدام streamlit و هي مكتبة بايثون مفتوحة المصدر تتيح بناء تطبيق ويب مخصص لعلم البيانات والتعلم الآلي وغير ذلك الكثير. يهدف Streamlit إلى بناء ونشر التطبيقات دون الحاجة إلى أي معرفة بتطوير الويب.

و بطبيعة الحال إن كانت لغة البرمجة غير بايثون فهناك طرق متاحة في تلك اللغة، لكن ذكرت لغة بايثون بحكم أنها مشهورة و شائعة الإستعمال في مجال تحليل البيانات.

وديعة الله · 13 سبتمبر 2023

اى صفحة ويب ...لكن اللغات المستخدمة html .... css

ياريت لو فيه فيديو توضيحى او مثال لانى مبتدئه مش خبيرة

سمير عبود · 13 سبتمبر 2023

بتاريخ منذ ساعة مضت قال وديعة الله:

اى صفحة ويب ...لكن اللغات المستخدمة html .... css

ياريت لو فيه فيديو توضيحى او مثال لانى مبتدئه مش خبيرة

بإمكانك إستخدام مكتبة xlsx، يُمكنك تصفح مستودع المكتبة على github من خلال SheetJS / sheetjs. و هي مكتبة خاصة بجافاسكربت للتعامل مع جداول Excel.

مثال بسيط للإستعمال: لدي ملف بالإسم file.xlsx بداخله و رقة واحدة sheet1، و المحتوى التالي:

Html
Css
JavaScript
Python
Django
Flask

في العمود الأول.

نحاول من خلال جافاسكربت، قراءة الملف و الوصول لمُحتوى كل خلية:

أولاً نقوم بإستيراد المكتبة عبر Cdn:

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

ثم نستخدم المكتبة لقراءة محتوى الملف السابق:

<script type="module">

  const workbook = await fetch('./file.xlsx', { type: 'array' })

  	.then(resp => resp.arrayBuffer())

  	.then(buff => XLSX.read(buff))

  	.catch(err => console.error(err))

  console.log(workbook)

</script>

بهذا الشكل نقرأ الملف و نُخزن محتواه في المتغير workbook.

ثم يُمكننا أن نصل إلى الورقة الأولى:

let sheet = workbook.Sheets[workbook.SheetNames[0]];
console.log(sheet)

ثم نقرأ ال range و هو كائن به خاصيتين s تُعبر عن البداية (start) و e تُعبر عن النهاية (end) أي بداية المُحتوى و نهايته في الورقة، و في كل من الخاصيتين s و e هناك خاصيتين r و c تُعبران عن الصف و العمود:

let range = XLSX.utils.decode_range(sheet['!ref']);
console.log(range)

أخيراً يُمكننا العُبور على الخليات المتواجدة في الورقة بإستعمال المُتغير range و الحلقات for:

for (let R = range.s.r; R <= range.e.r; ++R) {
  for (let C = range.s.c; C <= range.e.c; ++C) {

    console.log('Row : ' + R);
    console.log('Column : ' + C);

    let cellref = XLSX.utils.encode_cell({c:C, r:R});
    console.log(cellref)

    if(!sheet[cellref]) continue;
    let cell = sheet[cellref];
    console.log(cell.v)
  }
}

بعد التشغيل سنتحصل في نافذة ال console للمتصفح:

Row : 0
Column : 0
A1
Html
Row : 1
Column : 0
A2
Css
Row : 2
Column : 0
A3
JavaScript
Row : 3
Column : 0
A4
Python
Row : 4
Column : 0
A5
Django
Row : 5
Column : 0
A6
Flask

و هذا محتوى ملف ال Html بشكل كامل:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

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

      const workbook = await fetch('./file.xlsx', { type: 'array' })

      .then(resp => resp.arrayBuffer())

      .then(buff => XLSX.read(buff))

      .catch(err => console.error(err))

      console.log(workbook)

      let sheet = workbook.Sheets[workbook.SheetNames[0]];
      console.log(sheet)

      let range = XLSX.utils.decode_range(sheet['!ref']);
      console.log(range)

      for (let R = range.s.r; R <= range.e.r; ++R) {
        for (let C = range.s.c; C <= range.e.c; ++C) {

          console.log('Row : ' + R);
          console.log('Column : ' + C);

          let cellref = XLSX.utils.encode_cell({c:C, r:R});
          console.log(cellref)

          if(!sheet[cellref]) continue;
          let cell = sheet[cellref];
          console.log(cell.v)
        }
      }
    </script>
  </body>

</html>

حتى يعمل الملف بدون مشاكل عليك تشغيله عبر خادم، يُمكنك إستعمال إضافة Live Server في برنامج Vs Code لتحقيق ذلك.

يُمكنك أيضاً التوسع أكثر و قراءة الدوال و التوابع المتواجدة في توثيق المكتبة و إستعمالها لتحقيق ما تريد.

وديعة الله · 14 سبتمبر 2023

جربت بس ماقدرت اطبق

ياريت لو فيه فيديو تمدونى بيه

حتى بحتث فى اليوتيوب ماطلع اللى نبيه ممكن ماعرفتش نصيغ اللى نبيه فى البحث

Mustafa Suleiman · 14 سبتمبر 2023

ما هي اللغة المطلوبة لتنفيذ لك، بايثون أم جافاسكريبت أم PHP؟

علي أي حال بايثون ممتازة في التعامل مع البيانات وخاصًة جداول Excel وأيضًا بوجود إطار عمل مثل Flask يمكنك إنشاء موقع بسيط لتنفيذ ما تريدينه.

وإليك مثال بسيط على كيفية تنفيذ هذا الأمر باستخدام Flask و pandas:

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

# قم بقراءة ملف Excel وتحويله إلى DataFrame
df = pd.read_excel('data.xlsx')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/search', methods=['POST'])
def search():
    # احصل على معايير البحث من نموذج البحث على الواجهة
    search_term = request.form['search_term']

    # قم بالبحث في البيانات
    results = df[df['column_name'].str.contains(search_term, case=False)]

    return render_template('results.html', results=results)

if __name__ == '__main__':
    app.run(debug=True)

والرجاء استبدال 'data.xlsx' بمسار ملف Excel لديك و 'column_name' بالاسم الصحيح للعمود الذي ترغبين في البحث به.

ثم يمكنك إنشاء صفحات HTML (index.html و results.html) لتصميم واجهة المستخدم وعرض النتائج على الواجهة.

والأمر بسيط بمجرد تعلم أساسيات بايثون وFlask كل ما عليك هو البحث عن "كورس بايثون ثم كورس FLask" على يوتيوب.

أيضًا بإمكانك البحث عن استخدام مكتبة openpyxl أو pandas على اليوتيوب.

وتستطيعي التعلم من المصادر التالية أيضًا:

وديعة الله · 14 سبتمبر 2023

انا مصممه موقع بلغة html .... css جافا

وبصراحه مانعرفش كيف ندخل لغة بايتون

والأمثالة جربتهن بس مااطبقوش لأنى مافهمتس كويس الحق هذا علاش طلبت فيديو

انا الموقع كامل كل خطوه نديرها نبحث ونتعلم من الفيديوهات

بس انى اندير صفحة بحث ونربطها بالملف الاكسل اللى عندى ماعرفتهاش وماعرفتش نصيغ الكلام ونحث عنه باليوتيوب ...جربت اغلب الجمل اللى خطرو فى بالى بس ماطلعلى فيديو محتواها نفس اللى نبيه

والوقت ضيق ووقفت على هذه الخطوه لإستكمال مشروعى

التعامل مع جداول Excel من خلال تطبيق ويب

السؤال

وديعة الله

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

Recommended Posts

سمير عبود

وديعة الله

سمير عبود

وديعة الله

Mustafa Suleiman

وديعة الله

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية