Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

كيفية تشفير قائمة مهام مرحة بواسطة PHP و AJAX

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

بالنسبة إلى البرنامج التعليمي "Tuts + Premium" لهذا الأسبوع، سنعمل مع العديد من التقنيات المختلفة. في النهاية، سننشئ قائمة مهام تسمح لك، أو لمستخدمك، بإنشاء العناصر وتحديثها وحذفها بشكل غير متزامن. لإنجاز مهمتنا، سنستخدم قدرات PHP و AJAX في jQuery. أعتقد أنك ستجد أنه ليس بنفس الصعوبة التي قد تفكر بها في البداية. سأريك كيف بالضبط!

يشتمل هذا البرنامج التعليمي على لقطات شاشة متاحة لأعضاء Tuts + Premium.



الخطوة 1: إنشاء قاعدة بيانات جديدة

كما يمكنك أن تتخيل، لا يمكننا حفظ وحذف وتحديث السجلات في بيئة ثابتة. لذا، يجب علينا إنشاء قاعدة بيانات MySql التي ستخزن المعلومات.

إذا كنت تستخدم PHPMyAdmin، فقم بالوصول إلى لوحة التحكم عن طريق زيارة http: // localhost / phpmyadmin.


ضمن مربع النص "إنشاء قاعدة بيانات جديدة"، اكتب "db" وانقر فوق "إنشاء". بعد ذلك، ستحتاج إلى إنشاء جدول. اكتب "todo"، و "3" لـ "عدد الحقول".


إنشاء الأعمدة لدينا

سنحتاج الآن إلى إضافة الأعمدة المناسبة.

  • id: معرف فريد لتحديد كل صف.
  • العنوان: عنوان البند لدينا.
  • الوصف: وصف يوضح بالتفصيل ما يتعين علينا القيام به!

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


إدراج صفوف اختبار    

الآن بعد أن أنشأنا قاعدة البيانات الخاصة بنا، دعنا نضيف بسرعة بعض صفوف الاختبار. انقر على قاعدة البيانات "db" الخاص بك؛ ثم اختر "تصفح". سيتم نقلك إلى شاشة تسرد محتويات كل صف في قاعدة البيانات الخاصة بك. من الواضح أن هذا القسم فارغ الآن. اختر "إدراج" وأضف بضعة أعمدة. اكتب ما تشاء هنا.




لقطة شاشة كاملة



الخطوة 2: فئة Db


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

  • __إنشاء: تعمل هذه الوظيفة تلقائيًا بمجرد إنشاء كائن.
  • الحذف بواسطة id (): يحذف الصف الضروري بواسطة تمرير معرف فريد في الصف.
  • التحديث بواسطة id(): يتم تحديث الصف عن طريق تمرير معرفه الفريد.

افتح محرر التعليمات البرمجية الذي تختاره، وأنشئ ملفًا جديدًا باسم "db.php". ضمن هذا المستند الفارغ، قم بلصق سطور التعليمات البرمجية التالية.

لإنشاء فئة جديدة، نستخدم الصيغة الموضحة أدناه.

باستخدام الشيفرة أعلاه فقط، قمنا بإنشاء فئة جديدة بنجاح. لا تفعل أي شيء حتى الآن، ولكنها مع ذلك فئة!

__إنشاء()

تُعرف طريقة __إنشاء () (الفئة تتحدث عن "الدالة") باسم "الطريقة السحرية". سيتم تشغيلها مباشرة بعد إنشاء فئة. سنستخدم هذه الطريقة لجعل اتصالنا الأولي بقاعدة بيانات MySql.

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

الوصول إلى الخصائص من الطرق

ضمن الطريقة ، لا يمكننا الوصول إلى خاصيتنا فقط عن طريق كتابة "$ mysql". يجب أن نشير أولاً إلى الكائن.

تأكد من ملاحظة حقيقة أنه عند الوصول إلى الخاصية، يمكننا ترك علامة الدولار.

mysqli


من الأفضل استخدام mysql المحسّن (mysqli) بدلاً من طريقة الاتصال بـ mysql_ التقليدية عند الاتصال بقاعدة بيانات. ليس الأمر أسرع فحسب، ولكنه يسمح لنا أيضًا باستخدام منهج OOP.

عند إنشاء نسخة جديدة من فئة mysqli، يجب أن نمر في أربعة بارامترات.

  • المضيف: "المضيف المحلي"
  • اسم المستخدم: الجذر
  • كلمة المرور: "كلمة مرورك"
  • اسم قاعدة البيانات: db

يجب أن نكون قد قمنا بذلك حتى الآن. سوف نعود إلى فئتنا على مدار هذا البرنامج التعليمي لإضافة طرق جديدة. فقط تذكر، عندما نخلق نسخة جديدة من هذه الفئة ...

... نقوم تلقائيًا بفتح اتصال بقاعدة بياناتنا، وذلك بفضل الطريقة السحرية __إنشاء ().

العلامة


الآن، نحن بحاجة إلى إنشاء العلامة الخاص بنا للصفحة الرئيسية. قم بإضافة صفحة جديدة إلى الحل الخاص بك، واحفظه باسم "index.php". بعد ذلك، قم باللصق فيما يلي.

تحليل

ضمن ترويسة مستندنا، سوف أرجع  إلى CDN من Google للوصول إلى jQuery. هذه هي الطريقة المفضلة بسهولة عند استخدام jQuery. بعد ذلك، سأشير إلى ملف "scripts.js" الذي سننشئه لاحقًا في هذا البرنامج التعليمي.

دعونا نراجع بسرعة من أجل ماذا كل div.

  • الحاوية: معيار التفاف div.
  • ul # علامات التبويب: التنقل لدينا. سنستخدم Javascript لإضافة علامات التبويب الإضافية. ساوضح لماذا قريبا.
  • الرئيسي: التفاف للمحتوى الرئيسي.
  • المهام: علامة تبويب 1.
  • إضافة مدخل جديد: علامة التبويب 2

الخطوة 4: CSS


هذا ليس درسًا لـ CSS، بحد ذاته. أنت حر في مراجعة ورقة الأنماط التي استخدمتها. يوجد في حزمة التنزيل. إذا كنت ترغب في مراجعة أعمق، فراقب لقطة الشاشة.


الخطوة 5: استرجاع السجلات

الآن بعد أن اتصلنا بقاعدة البيانات، وأنشأنا علامة / CSS، دعنا نكتب بعض التعليمات البرمجية التي ستقوم باسترداد صفوف قاعدة البيانات.

داخل div  "المهام"، أدخل ما يلي.

تحليل

  • استخدم "يتطلب" للوصول إلى فئة Db الخاصة بنا.
  • قم بإنشاء حالة جديدة للفئة Db.
  • قم بإنشاء استعلام. سيقوم هذا باسترداد كافة السجلات من جدول "المهام"، وافرزها بترتيب تصاعدي.
  • يجب علينا الآن تنفيذ استعلامنا. $ DB-> mysql-> الاستعلام ($ الاستعلام). يشير $ db إلى الكائن. يشير mysql $ إلى فئة mysqli. إن الاستعلام $ هو عبارة عن طريقة لفئة mysqli التي تسمح لنا بالمرور في الاستعلام. هنا، نمر في السلسلة التي أنشأناها للتو.
  • $ results-> يقوم num_rows بإرجاع العدد الإجمالي للصفوف المعاد تكوينها من قاعدة البيانات. إذا تم إرجاع واحد أو أكثر، فسنستخدم بعد ذلك عبارة while لتشكل حلقة عبر الصفوف.
  • قم بإنشاء متغير مؤقت يسمى $ row والذي سيشير إلى المعلومات، من أجل كل تكرار. ثم نقوم بإنشاء ثلاثة متغيرات تشير إلى نظرائها المعنيية داخل قاعدة البيانات.
  • سيتم لف كل عنصر داخل div بفئة "عنصر".
  • بعد ذلك، نستخدم heredocs لتنسيق بند المهام الواجبة. Heredocs تسمح بطريقة سهلة ومنظمة مزج html و php. لمعرفة المزيد، تأكد من مراجعة مقطع الفيديو هذا.
  • لف العنوان ضمن علامات h4؛ الوصف داخل علامات p.
  • يحتاج المستخدم إلى طريقة لتعديل وحذف كل عنصر. لذلك، أنشأنا علامتي ترقيم ستمكننا من القيام بذلك. سوف نعود إلى هذا في وقت لاحق.
  • محاكاة معلومات heredocs لدينا، وإغلاق " البند div."
  • إذا تم إرجاع الصفوف الصفرية من قاعدة البيانات،  المحاكاة "هناك عناصر صفر. أضف واحد الآن!".

نأمل أن يكون كل ذلك منطقيًا. في هذه المرحلة، يجب أن يكون لديك شيء مثل ما يلي:        


الخطوة 6: إضافة عنصر جديد


نحن نريد أيضًا أن يكون لدى المستخدم القدرة على إدراج سجلات جديدة. لنقم بإنشاء نموذج يسمح بهذا الأمر.

هذا هو النموذج القياسي "العادي". لقد أضفنا مدخلات للعنوان والوصف. عند النقر فوق الزر إرسال، سيتم نشر المعلومات التي تم إدخالها إلى "addItem.php". لنقم بإنشاء هذه الصفحة الآن.


الخطوة 7: AddItem.php

قم بإنشاء مستند جديد وحفظه كـ "addItem.php". الصقه في التعليمة البرمجية التالية:

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

الخطوة 7: تحديث العناصر


باستخدام قدرات AJAX في jQuery، دعنا نسمح للمستخدم بتحديث كل عنصر دون إعادة النشر. أنشئ ملفًا جديدًا داخل مجلد "js"، واسمه "scripts.js". تذكر، لقد أشرنا بالفعل إلى هذا الملف في الترميز الخاص بنا.

إذا كنت ستعود إلى الترميز على index.php، فسترى:

فك كل سطر

باستخدام jQuery، نحن بحاجة إلى الاستماع عندما يتم النقر فوق علامة الارتساء مع فئة "تحديد المدخل".

بعد ذلك، نخزّن $ (this) - وهذا يشير إلى علامة الربط التي تم النقر عليها.

نحن بحاجة إلى تخزين الوصف الأصلي. نخبر علامة الربط للعثور على div الأصلي، والبحث عن علامة p - التي تحتوي على نص الوصف. نحن نأخذ هذه القيمة باستخدام "text ()".

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

مرة أخرى، نستخدم "find" للوصول إلى هذا الإدخال المخفي، ثم نحصل على قيمته.

الآن، نحتاج إلى السماح للمستخدم بإدخال وصف جديد. هذا هو السبب في أنهم نقروا على "تحرير الإدخال"، أليس كذلك؟ تم العثور على وصف العلامة P، وإفراغها، ثم إلحاق textarea. نستخدم "فارغ ()" للتأكد من أننا نتخلص من كل النص؛ ليس هناك حاجة بعد الآن. قيمة هذا النص ستكون مساوية للنص القديم - كوسيلة ملائمة.


ابحث عن هذا النص الجديد، وعندما يترك المستخدم مربع النص، قم بتشغيل إحدى الوظائف.

اقبض على النص الجديد الذي يدخل المستخدمين في هذه المساحة النصية.

استدعي وظيفة .ajax، وقم بالتمرير على بعض من البارامترات. سيكون النمط "POST". عنوان url للوصول هو "updateEntry.php". البيانات المراد تمريرها إلى هذه الصفحة هي النص الجديد الذي أدخله المستخدم، والمعرف الفريد من هذا الصف في قاعدة البيانات. عندما يتم تنفيذ التحديث بنجاح، قم بتشغيل الدالة، وقم بتحديث النص القديم بالنص الجديد!

إرجع للمزيف للتأكد من أن النقر فوق علامة الربط لا يوجه المستخدم إلى مكان آخر.


الخطوة 7 ب: PHP

تذكر، لقد قمنا بالاتصال بصفحة "updateEntry" PHP مع jQuery، لكننا لم نقم بإنشائها فعليًا! دعونا نفعل ذلك الآن. أنشئ صفحة جديدة باسم"updateEntry.php" ثم الصقها في ما يلي.

كما كان من قبل، نحن نشير إلى فئة db الخاصة بنا، ثم نقوم بتفعيلها. بعد ذلك، سننشئ متغيرًا جديدًا، يُسمى استجابة $، ونجعله مساويًا لما يتم إرجاعه من "update_by_id ()". لم ننشئ هذه الطريقة حتى الآن. الآن هو الوقت المناسب للقيام بذلك.

إضافة طريقة جديدة لفئتنا

عد إلى صفحة db.php الخاصة بك وأضف طريقة جديدة في الأسفل.

تقبل هذه الطريقة بارامترين: المعرف، ووصف العنصر. لذا، عندما نسمي هذه الطريقة، يجب علينا أن نتذكر أن نمر في هذين البارامترين! نبدأ بإنشاء استعلامنا: تحديث جدول "المهام" وتغيير الوصف إلى أي شيء يتم تمريره - ولكن فقط قم بتحديث الصف عندما يساوي المعرّف البارامتر الذي تم تمريره.

مثل آخر مرة، سنستخدم العبارات المعدة لتحديث قاعدة البيانات الخاصة بنا. إنها الطريق الأسلم! قم بتحضير الاستعلام الخاص بنا، وقم بربط البارمترات (string و integer، أو 'si')، وتنفيذها. نحن نعيد سلسلة عامة، ولكنها غير مطلوبة على الإطلاق. الآن يجب أن يعمل التحديث الخاص بنا بشكل مثالي!


الخطوة 8: حذف العناصر


دعونا أيضا نقوم بإنشاء طريقة غير متزامنة لطيفة للمستخدم لحذف الإدخالات. عندما ينقرون على زر الحذف لأحد العناصر، فسوف نخفي القسم ونعمل على تحديث قاعدة البيانات لعكس الحذف. افتح ملف javascript الخاص بك وأضف ما يلي:

حل الشيفرة

عند النقر فوق علامة ارتساء مع فئة من "حذف ارتساء الادخال"، قم بتشغيل فئة.

ذاكرة التخزين المؤقت $(this) مثل ثيسبارام.

قم بتغيير نص الوصف إلى "الرجاء الانتظار". يجب أن نفعل هذا لإعطاء المستخدم بعض التعليقات، فقط في حال استغرق وقتًا أطول من المتوقع.

تمامًا مثل آخر مرة، نمر على بعض البارمترات التي تصل إلى "delete.php". فبدلاً من ترميز الصفحة في قيمة عنوان url، أقوم بالوصول إلى attr ('href') - الذي يساوي 'delete.php؟ id = $ id'.

لا نحتاج إلى بارامتر "DATA"، نظرًا لأن جميع المعلومات المناسبة موجودة ضمن سلسلة طلب عنوان url. بمجرد أن يتم تنفيذ الحذف بنجاح، نجد الأصل ".item" div، ويخفيه ببطء.

Delete.php

لقد اتصلنا بصفحة الحذف الخاصة بنا مع jQuery، لكننا لم نقم بإنشاء PHP بعد. قم بإنشاء صفحتك الجديدة وقم بإضافة التعليمة البرمجية التالية.

يجب أن تستخدم لهذه الإجراءات الآن. قم بإنشاء مثيل جديد لفئتنا، واستدعي الطريقة "delete_by_id". بمجرد اكتمال ذلك بنجاح، قم بإعادة توجيه المستخدم مرة أخرى إلى "index.php". كما قد تكون خمنت، نحتاج إلى إنشاء طريقة جديدة ضمن فئة db الخاصة بنا. عد إلى db.php وأضف دالتك الجديدة.

الحذف بواسطة طريقة id()

ستقبل هذه الطريقة بارامتر واحد - المعرف. تذكر: من أجل تحديث الصف، يجب أن نعرف هوية هذا الصف الفريد. بخلاف ذلك، فإنه سيتم تحديث كل صف. نقوم بحذف جميع الصفوف من الجدول، حيث يساوي المعرّف ما تم تمريره. وبما أن لكل صف معرّفًا فريدًا خاصًا به، فلن يتأثر سوى واحد فقط. بعد ذلك، نمرر هذا الاستعلام إلى كائن mysql الخاص بنا. مرة أخرى، العودة غير ضرورية؛ انها فقط للتسلية.


الخطوة 9: jQuery إضافي

لقد انتهينا من كل عمل PHP لدينا! الخطوة الأخيرة هي إضافة القليل من jQuery لجعل كل شيء يعمل بشكل أفضل قليلاً. في الجزء العلوي من ملف جافا سكريبت الخاص بك، مباشرةً بعد أسلوب document.ready، أضف الشيفرة التالية:

لقد علقت على كل خطوة بشكل جيد. لذا، سأمتنع عن تكرار نفسي. يجب أن يبدو ملف scripts.js النهائي كما يلي.


الخطوة 10: انتظر! التخطيط غريب في IE6.

لا يمكننا أن نستدعيه اليوم بعد! مستكشف الانترنت اولي6 المرح هذا يسبب مشاكل تخطيط قليلة.


  1. الخلفية pngs 24 بت. لا يدعم IE6 هذا بشكل أصلي. سنحتاج إلى استيراد نص برمجي لإصلاحه.
  2. لا تظهر علامات تبويب التنقل في المكان الصحيح.
  3. لا يتم عرض كل div.item بشكل صحيح عند توسيعه.
  4. تعد أزرار التحرير والحذف لدينا بعيدة جدًا عن يمين div.

الحل

على الرغم من أننا قد نحب ذلك، لا يمكننا تجاهل هذا المتصفح حتى الآن. لحسن الحظ، ستجد أن معظم مشكلات IE6 يمكن إصلاحها بسهولة تامة. أولاً، نحتاج إلى استيراد برنامج نصي يعمل على إصلاح مشكلة شفافية ألفا. لدى دين مارتن ملف جافاسكريبت رائع يجمع IE6 مع المعايير المتوافقة. ببساطة عن طريق إضافة "-ترانس" إلى نهاية أسماء ملفات png 24 بت، يمكننا حل مشكلتنا. تأكد من زيارة مجلد الصور وتحرير الأسماء.

يأتي CDN من Google للإنقاذ مرة أخرى من خلال تقديم نسخة مستضافة من البرنامج النصي IE7. يعمل هذا على حل مشكلة الشفافية لدينا، ولكن لا يزال لدينا بعض المراوغات الأخرى.


لاحظ أنه، في بياننا المشروط، قمنا أيضًا باستيراد ملف "ie.css". أنشئ هذا الملف الآن، ثم الصق ما يلي:

ستجد أن إضافة "الموضع :نسبي" و "التجاوز: مخفي" و "الارتفاع:100%" سيصلح 90٪ من مشكلات IE6. الآن، يعمل تخطيطنا بشكل مثالي في جميع المتصفحات!


انت انتهيت!


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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.