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

بناء سحابة علامة مدعومة بـ jQuery

by
Difficulty:IntermediateLength:LongLanguages:

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

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


tag cloud

من السهل تنفيذ سحابة العلامة بشكل سيء؛ سواء من منظور التصميم أو من منظور الشيفرة. بفضل jQuery، من السهل أيضًا القيام بعمل جيد. سنستخدم الإصدار 1.3 الجديد الرائع من jQuery لهذا المثال وسنعمل مع PHP و MySql لتقديم خلاصة JSON لعلاماتنا. يُعد الحصول على العلامات في قاعدة البيانات في المقام الأول خارج نطاق هذا البرنامج التعليمي، ولكنها مسألة بسيطة بما يكفي لاستردادها ونقلها إلى صفحة انتظار عبر AJAX.

ابدأ

دعنا نبدأ على الصفحة التي ستظهر عليها سحابة العلامة؛ في ملف جديد في محرر النص الخاص بك قم بإنشاء الصفحة التالية:

احفظ هذا كـ tagcloud.html. في هذه المرحلة لا يوجد لدينا أي شيء تقريبًا على الصفحة، مجرد حاوية بسيطة لسحابة العلامة وعنوان من المستوى الثاني داخل الحاوية. يمكن إنشاء أي عناصر أخرى نحتاجها عندما تكون مطلوبة. نربطها بنموذج في الرأس لبعض التصميم الذي سنضيفه لاحقًا، وفي نهاية النص، نربط بـ jQuery. نجري طلبًا من أجل استجابة JSON في كتلة نصية مخصصة بعد الرجوع إلى jQuery.

getJSON

نستخدم الاسم المستعار $ لاستدعاء طريقة getJSON jQuery، وهي تجريد بمستوى أعلى من طريقة ajax؛ تستدعى طرق jQuery عادةً على كائنات تشير إلى عناصر، ولكن لأننا لا نشير إلى أي عناصر حتى الآن يمكننا استخدام الاسم المستعار jQuery بدلاً من ذلك. هذا يعني أيضًا أن كائن jQuery لن يتم إعادته بالطريقة. بدلاً من ذلك يتم تمرير طلب xmlHTTP مرة أخرى.
تقبل طريقة getJSON الوسيطتين في هذا المثال (على الرغم من أنه يمكن استخدام المزيد إذا لزم الأمر)؛ الأول هو عنوان URL الذي نطلبه. نظرًا لأننا سنحصل على كائن JSON، فمن المنطقي استخدام getJSON. يمكننا استخدام طريقة ajax ولكننا سنحتاج بعد ذلك إلى تهيئة المزيد من خصائص الطلب (مثل نموذج البيانات)، لذلك فإن استخدام هذا يوفر لنا بعض الوقت والترميز. في نهاية عنوان URL نحدد رد اتصال JSONP -؟ رد الاتصال =؟ - مما سيمكن المتصفح من التعامل مع كائن JSON مباشرة، حتى إذا كان يأتي من نطاق آخر، دون أي معالجة إضافية من جانب الخادم.

وظيفة رد الاتصال

الوسيطة الثانية هي وظيفة رد الاتصال التي نريد تنفيذها بمجرد إرجاع الكائن إلى الصفحة. لم نضع أي شيفرة في هذه الدالة حتى الآن، لأننا لا نملك كائن JSON للعمل به. يمكننا العودة إلى هذه الصفحة بعد قليل عندما نكتب PHP. لقد قلت قبل لحظات أنه لا حاجة إلى المعالجة من جانب الخادم عند العمل مع عمليات الاسترداد من JSONP، ومع ذلك سنبدأ الآن في الكتابة وكتابة بعض PHP. هذا فقط لأن لا أحد يقدم البيانات التي نريدها لذلك علينا أن ننشئها بأنفسنا. إذا كان هناك شخص ما يقدم خلاصة JSON للعلامات الشائعة، فلا يزال بإمكاننا استخدام شفرة jQuery نفسها لطلبها ومعالجتها.

بعض PHP

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

احفظ هذا كـ tagcloud.php. بالنسبة إلى هذا المثال أفترض أن لديك MySql مثبتًة وتمت تهيئتها، ولديك إعداد قاعدة بيانات تسمى tagcloud. ضمن قاعدة البيانات هذه أفترض أيضًا وجود جدول يسمى العلامات. سيحتوي هذا الجدول على صفوف من العلامات وعدد مرات ظهور هذه العلامات. أريد التأكيد على أن هذا ليس شيفرة  على مستوى الإنتاج لأن الأمان لم يكن عاملاً في تصميمه؛ نحتاج إلى مكان للحصول على استجابة AJAX من هذا المثال وهذه الشيفرة ستعطينا ذلك في مكان ما.

دعونا ننظر بإيجاز إلى ما قمنا به.

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

بعد ذلك ننشئ السلسلة التي ستبدأ بتشغيل كائن JSON، قبل الدوران خلال كل صف في الجدول وتنفيذ الاستعلام. نستمر في إنشاء سلسلة JSON في حلقة for، مع إضافة البيانات من كلا الحقلين في الصف الحالي كخصائص وقيم.

نجري فحصًا بسيطًا على كل تكرار للحلقة باستخدام الشرط لمعرفة ما إذا كنا نقرأ الصف الأخير في الجدول أم لا؛ إذا لم نستخدم فاصلة لفصل كل كائن، إذا أغلقنا الكائن. سيكون تنسيق كائن JSON كائنات سجلات فردية داخل مصفوفة حاوية واحدة، داخل كائن خارجي.

ثم نرد على الاستجابة مرة أخرى للعميل باستخدام طلب GET؛ هذا مطلوب من أجل الاستفادة من استدعاء jsonp في صفحتنا الرئيسية. نحتاج إلى تحديد اسم بارامتر URL الذي يتبع عنوان URL في جافا سكريبت، والذي في هذا المثال هو ببساطة معاودة الاتصال. لا يمكننا أن نحدد اسم الدالة التي نريد تمريرها إليه، لأن الدالة مجهولة الهوية. سوف يتعامل  jQuery مع هذا من أجلنا ويضمن تمرير البيانات إلى الوظيفة الصحيحة.

بمجرد الانتهاء، نغلق الاتصال. في هذه المرحلة، لا نزال لا نرى أي شيء على الصفحة، ولكن إذا قمت بتشغيل التشغيل من دليل خدمة المحتوى لخادم الويب الخاص بك واستخدمت علامة التبويب NET في Firebug، يمكنك رؤية البيانات التي يتم إرجاعها إلى الصفحة:

tag cloud

سحابة العلامة

والآن بعد أن أصبح لدينا بعض JSON للعمل معه، دعنا نرجع إلى صفحة HTML ونفعل شيئًا بها. مهمتنا الأولى هي معالجته لاستخراج البيانات. في tagcloud.html، أزل التعليق الذي تركناه داخل معاودة الاتصال وأضف الشيفرة التالية:

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

نقوم بتعيين نص كل رابط إلى قيمة خاصية علامة الكائن الحالي من كائن JSON الخاص بنا، بالإضافة إلى صف العنوان و href. سيعتمد استخدام href بشكل كبير على كيفية إنشاء الصفحات التي تعرض العلامات، يمكننا إنشاء صفحة نمط نتائج بحث تسرد كل الصفحات المطابقة لأي علامة تم النقر عليها باستخدام PHP أو .NET بسهولة كافية (صفحة النتائج هي أيضا خارج نطاق هذا البرنامج التعليمي). ثم يتم إلحاق الارتباط إلى عنصر القائمة، ويتم إلحاق كليهما ب <ul>

في هذه المرحلة، يجب أن تظهر صفحتنا بالشكل التالي:

tag cloud

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

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

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

الآن عند تشغيل الصفحة، يجب أن تظهر كما يلي:

tag cloud

الانتهاء من البرنامج النصي

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

في الحقيقة، يمكن بسهولة تقييد طريقة css إلى كائن jQuery مباشرة بعد تعيين سمة عنوان الرابط، ولكن يتم فصلها هنا للحصول على إمكانية قراءة أفضل. ضمن أسلوب css، نحدد سمة نمط حجم الخط ونستخدم الشيفرة الشرطية القياسية لجافا سكريبت للتحقق مما إذا كانت القيمة الحالية لخاصية التكرار المقسوم على 10 أقل من 1. إذا كان الأمر كذلك، فإننا نضيف 1 إلى الشكل ثم نسلسل سلسلة em على النهاية. سيضمن ذلك عدم احتواء أي من العلامات على حجم خط أقل من 1 em، وهو يساوي قاعدة نمط 70٪ المحددة على عنصر الحاوية.

ولكن إذا كانت قيمة خاصية التكرار freq مقسومة على 10 ليست أقل من 1، فإننا نتحقق من ذلك (باستخدام نظام ثلاثي آخر، أي ما يعادل التداخل للحلقات) سواء أكان أكبر من 2؛ إذا كان الأمر كذلك، فنحن نستخدم ببساطة 2em كقيمة لخاصية حجم الخط. أي عناصر بحجم خط 2em ستكون ضعف حجم خط الأساس الأصلي الخاص بنا 70٪، والذي قد يكون كبيرًا مثل أي علامة في هذا النوع من الأدوات. يتم استخدام أي قيم أكبر من 1 ولكن أقل من 2 على شكل كسور لتعيين وزن الخط بين 1 و 2 ems. يجب أن تظهر الصفحة الأخيرة الآن مثل لقطة الشاشة التالية عند عرضها في المتصفح:

tag cloud

ملخص

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

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.