طلب مساعدة برمجة صفحة ادخال بيانات

[Abrawi90]

ر
السلام عليكم

ابحث عن كود كامل لصفحة ادخال بيانات لرسائل مستلمة بشكل يومي

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

وبعد ادخالها والضغط على زر تخزين يتم تخزينها تلقائيا في جدول اسفل الصفحة

وايضا احتاج ان يكون هناك زر للبحث عن اي بيانات اخرى في اي وقت اريد

اريد تعلم هذه البرمجة في برنامج visula studio code css

افتراضا اريد تخزيم البيانات كهذه

ثم تاتي البيانات في الاسفل تحت خانات البيانات كهذه



اتمنى في احد يساعدني

انا جديد واحاول اتعلم منكم



شكرا

 

[فخم الطلةعضوية موثوقة]

وعليكم السلام ورحمة الله وبركاته

حياك الله

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

وخاصة chatGPT و copilot

بالنسبة لاستفسارك فهذه إجابة chatGPT

___________

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

الكود يتكون من جزء إدخال البيانات، جدول لعرض البيانات، ووظيفة للبحث، وكلها مدمجة في ملف واحد:

HTML + CSS + JavaScript

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الكود المخفي

الشرح

إضافة البيانات: يتم إدخال بيانات الرسالة (الاسم، المنطقة، نوع الرسالة، تاريخ الاستلام) في الحقول المحددة، وعند الضغط على زر "إضافة" يتم إضافة البيانات إلى الجدول أسفل النموذج.

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

البحث في البيانات: يوجد مربع بحث فوق الجدول يسمح لك بالبحث في جميع البيانات المدخلة في أي عمود من الجدول.


طريقة الاستخدام

1. انسخ الكود أعلاه والصقه في ملف جديد بامتداد .html باستخدام برنامج Visual Studio Code.


2. افتح الملف في متصفح الويب لترى النتيجة.


3. يمكنك إدخال البيانات والبحث كما هو موضح في الصور التي أرسلتها.



يمكنك التوسع في هذا النموذج بإضافة المزيد من الميزات كالتخزين في قاعدة بيانات أو تحسين الواجهة الرسومية باستخدام
المزيد من خصائص CSS.

___________

بالتوفيق ،،