اذهب إلى المحتوى

أسامة عبد الهادي

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    7

  • تاريخ الانضمام

  • تاريخ آخر زيارة

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. أسامة عبد الهادي
    `$var1 = $request->input->var1;`
  2. أسامة عبد الهادي
    مزيد من المعلومات حول "فهم الأحداث في جافاسكربت"
    في سلسلة فهم شجرة DOM، ناقشنا شجرة DOM وكيفية الوصول والتنقل وإضافة وإزالة وتعديل العقد والعناصر باستخدام وحدة تحكّم أدوات المطوّر. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } code { background-color: rgb(250, 250, 250); border-radius: 3px; } بإمكاننا إجراء أي تغيير على شجرة DOM حتى هذه اللحظة، من وجهة نظر المستخدم فإنّه ليسَ مفيدًا للغاية لأننا قمنا بتنفيذ التغييرات يدويًّا فقط. سنتعرَّف الآن على الأحداث وربط كل شيء معها لإنشاء مواقع تفاعلية. ما هي الأحداث؟ الأحداث (event) هي الإجراءات التي تحدث في المتصفّح والتي يبدأها المستخدم أو المتصفّح. فيما يلي عدّة أمثلة عن الأحداث الشائعة التي يمكن أن تحدث على موقع الويب: انتهاء الصفحة من التحميل نقر المستخدم على زر تحويم المستخدم سهم الفأرة فوق قائمة منسدلة إرسال المستخدم بياناته ضغط المستخدم على أحد مفاتيح لوحة مفاتيحه. بإمكان المطورين إظهار رسائل للمستخدم للتحقق من صحة بيانات، والاستجابة إلى ضغط زرٍّ، والعديد من الإجراءات الأخرى وذلك عبر برمجة استجابات جافاسكربت على حدث معيّن. سنتطرق إلى مُعَالِجَاتَ الأحداث ومُسْتمعي الأحداث وكائنات الأحداث. كما سنعرّج لثلاث طرقٍ مختلفة لكتابة التعليمات البرمجيّة للتعامل مع الأحداث، وبعض الأحداث الأكثر شيوعًا. ستتمكّن من تقديم تجربة ويب أكثر تفاعلية للمستخدمين النهائيين، من خلال التعرف على الأحداث. معالجات الأحداث ومستمعي الأحداث عندما ينقر المستخدم على زر أو يضغط المفتاح، يتم قدحُ الحدث، ويُسمّى آنذاك حدث النقر click أو حدث الضغط keypress على التوالي. معالج الأحداث (event handler) هو دالَة جافاسكربت تعمل عند وقوع حدثٍ ما. يقوم مستمع الحدث (event listener) بإرفاق واجهة استجابة لعنصر، ممَّا يسمح لهذا العنصر بالانتظار لإطلاق الحدث المحدّد أو ويكأنه يتنصَّت ويستمع إلى صوت إطلاق ذلك الحدث المتمثِّل بعيار ناري. هناك ثلاث طرق لإسناد الأحداث إلى العناصر: مُعَالِجَات الأحداث المضمّنة (Inline event handlers). خاصيات معالج الحدث (Event handler properties). مستمعو الأحداث (Event listeners). سنتعرف على ثلاث الطرق جَمِيعِها للتأكّد من أنك على دراية كاملة بكلِّ طريقة لإطلاق الحدث، ومناقشة إيجابيات وسلبيات كل طريقة. الخصيّات المضمّنة لمعالج الأحدث لبدء التعرف على معالجات الأحداث، سننظر أولاً في معالج الحدث المضمَّن (inline event handler9). لنبدأ بمثالٍ بسيط للغاية، يتكون من العنصرين زرٍّ button وفقرة p. ونريد من المستخدم أن يضغط على الزر لتغيير محتوى النص في الفقرة. لنبدأ بصفحة HTML تحتوي على زرٍ. سنشير إلى ملف جافاسكربت وسنضيف الشيفرة البرمجية فيما بعد: الملف events.html: <!DOCTYPE html> <html lang="en-US"> <head> <title>Events</title> </head> <body> <!-- إضافة زر --> <button>Click me</button> <p>Try to change me.</p> </body> <!-- ملف جافاسكربت --> <script src="js/events.js"></script> </html> سنضيف خاصية على الزر مباشرةً تسمّى onclick ( أي عند النقر، نفِّذ ...). ستكون قيمة خاصيّة هي دالة ننشئها تسمّى changeText()‎ تمثِّل معالج الحدث. الملف events.html: <!DOCTYPE html> <html lang="en-US"> <head> <title>Events</title> </head> <body> <button onclick="changeText()">Click me</button> <p>Try to change me.</p> </body> <script src="js/events.js"></script> </html> لننشئ الملف events.js ضمن المسار ‎‎js/‎‎. سننشئ الدالة changeText()‎ التي ستعدّل محتوى النص المتمثِّل بقيمة الخاصية textContent على عنصر الفقرة p. الملف js/events.js: // تعديل نصِّ الفقرة عبر هذه الدالّة const changeText = () => { const p = document.querySelector('p'); p.textContent = "I changed because of an inline event handler."; } عند تحميلك الصفحة events.html لأول مرة ستبدو كما يلي: حينما يتمُّ النقر على الزر من قبل المستخدم أو غيره، فإن محتوى نصّ الفقرة سيتغيّير من Try to change me. إلى I changed because of an inline event handler. تعدُّ معالجات الأحداث المضمّنة طريقةً مباشرةً لبدء فهم الأحداث، ولكن يجب ألا تستخدم بشكل عام خارج نطاق الاختبار والأغراض التعليميّة. يمكنك مقارنة معالجات الأحداث المضمَّنة بأنماط CSS المضمَّنة في عنصر HTML. من العمليّ للغاية الحفاظ على ورقة أنماط منفصلة للأصناف بدلًا من إنشاء أنماط مضمّنة في كل عنصر، تمامًا كما هو أكثر جدوى للحفاظ على شيفرات جافاسكربت التي تتم معالجتها بالكامل من خلال ملف منفصل بدلًا من إضافتها إلى كل عنصر. خاصيات معالج الأحداث الخطوة التالية، هي الانتقال من معالج الأحداث المضمّنة إلى خاصية معالج الأحداث. يعمل هذا بشكل مشابه جدًّا لمعالج مضمَّن، باستثناء أننا نقوم بتعيين خاصية العنصر في الجافاسكربت بدلًا من خاصية HTML. سيكون الإعداد هو نفسه هنا، باستثناء أننا لم نعد ندرج onclick="changeText()‎"‎ في شيفرة العنصر: الملف events.html: ... <body> <button>Click me</button> <p>I will change.</p> </body> ... ستظلُّ وظيفتنا متشابهة أيضًا، إلا أننا نحتاج الآن إلى الوصول إلى العنصر button في جافاسكربت. يمكننا ببساطة الوصول إلى الخاصية onclick مثلما نصل إلى الخاصية style أو id أو أي خاصية عنصر أخرى، ثم نقوم بتعيين مرجع للدالة المراد تنفيذها. الملف js/events.js: // الدالة المراد تنفيذها عند وقوع الحدث والتي تعدِّل محتوى الفقرة const changeText = () => { const p = document.querySelector('p'); p.textContent = "I changed because of an event handler property."; } // button إضافة معالج حدث كخاصية للعنصر const button = document.querySelector('button'); button.onclick = changeText; ملاحظة: لا تتبع معالجات الأحداث عُرْفَ سنام الجمل (camelCase) التي تلتزم بها معظم تعليمات جافاسكربت البرمجية. لاحظ أن الرمز هو onclick، وليس onClick. عند تحميل الصفحة لأول مرة ، سيعرض المتصفح ما يلي: الآن عند النقر فوق الزر، سيكون له تأثير مماثل كما كان من قبل: لاحظ بتمريرنا مرجع الدالة المراد تنفيذها إلى الخاصية onclick، فإننا لا نقوم بتضمين الأقواس، حيث أننا لا نستدعي الدالّة في تلك اللحظة، ولكننا نمرّر مرجعًا إليها. button.onclick = changeText; تعدُّ خاصيَّة معالج الأحداث أكثرَ قابليَّةٍ للصيانة من المعالج المضمَّن، إلَّا أنها تعاني عقباتً مماثلة. فمثلاً، محاولةُ تعييِّن عدّة خصائص onclick منفصلة سيطبق التأثير على آخر محاولة. كما هو موضَّح أدناه. الملف js/events.js: const p = document.querySelector('p'); const button = document.querySelector('button'); const changeText = () => { p.textContent = "Will I change?"; } const alertText = () => { alert('Will I alert?'); } // يمكن تعديل الأحداث button.onclick = changeText; button.onclick = alertText; في المثال أعلاه، لن تعرض النقرة على الـ button سوى تنبيه، ولن تغيّر النصّ p، لأن alert()‎ هو آخر تعليمة برمجية أضيفت إلى الخاصية. من خلال فهم كل من معالجات الأحداث المضمّنة وخصائص معالج الأحداث، دعنا ننتقل إلى مستمعي الأحداث. مستمعي الأحداث أحدث إضافة إلى معالجات الأحداث في جافاسكربت هي مستمعي الحدث. يراقب مستمع الحدث حدثًا على عنصر. بدلاً من إسناد الحدث مباشرةً إلى خاصيّة في العنصر، سنستخدم التابع addEventListener()‎ للاستماع للحدث. يأخذ addEventListener()‎ معاملين إلزاميين - الحدث الذي يجب الاستماع إليه، ودالَّة ردِّ نداء لتنفيذها عند اطلاق الحدث. ملف الـ HTML لمستمع الأحداث الخاص بنا هو نفسه في المثال السابق. الملف events.html: ... <button>Click me</button> <p>I will change.</p> ... سنظلّ نستخدم نفس الدالّة changeText()‎ كما سابقًا ولكن سنربطها مع التابع addEventListener()‎ على الزر. الملف js/events.js: // الدالة المراد تنفيذها عند وقوع الحدث والتي تعدِّل محتوى الفقرة const changeText = () => { const p = document.querySelector('p'); p.textContent = "I changed because of an event listener."; } // الاستماع لحدث النقر const button = document.querySelector('button'); button.addEventListener('click', changeText); لاحظ أنه مع أوّل طريقتين، تمّت الإشارة إلى حدث النقر باسم onclick، ولكن مع مستمعي الأحداث يشار إليه باسم click. تُسْقَطُ on من الكلمة لكل مُسْتَمِع حدث. في القسم التالي، سنأخذ المزيد من الأمثلة على أنواع الأحداث الأخرى. عند إعادة تحميل الصفحة بشيفرة جافاسكربت أعلاه، ستتلقى الخَرْج التالي: للوهلة الأولى، يبدو مستمعو الأحداث متشابهين جدًا مع خصائص معالج الأحداث، لكن لديهم بعض المزايا. يمكننا تعيين عدّة مستمعين على نفس العنصر، كما هو موضَّح في المثال أدناه. الملف js/events.js: const p = document.querySelector('p'); const button = document.querySelector('button'); const changeText = () => { p.textContent = "Will I change?"; } const alertText = () => { alert('Will I alert?'); } // يمكن إضافة عدة مستمعات إلى الحدث نفسه والعنصر نفسه أيضًا button.addEventListener('click', changeText); button.addEventListener('click', alertText); سيتمُّ إطلاق الحدثين في المثال أعلاه، ممّا يوفِّر للمستخدم كلًّ من التنبيه والنصِّ المعدّل بعد النقر فوق التنبيه. ستستخدام غالباً دالّات مجهولة (Anonymous functions) بدلاً من مرجع دالّة على مُسْتَمع الحدث. الدالّات المجهولة هي دالّات غير مُسَمَّاة. // دالة مجهولة يراد تنفيذها عند إطلاق الحدث button.addEventListener('click', () => { p.textContent = "Will I change?"; }); من المُمْكِن أيضًا استخدام دالّة removeEventListener()‎ لإزالة حدث واحد أو جميع الأحداث من عنصر. // button من العنصر alert حذف الدالة button.removeEventListener('click', alertText); يمكنك استخدام addEventListener()‎على الكائنين document و window. يُعَدُّ مُسْتَمِعُو الأحداث حاليًا الطريقةَ الأكثرَ شيوعًا والمفضَّلة للتعامل مع الأحداث في جافاسكربت. الأحداث المشتركة تعلمّنا عن معالجات الأحداث المضمّنة، وخصائص معالج الأحداث، ومستمعي الأحداث باستخدام حدث النقرات، ولكن هناك العديد من الأحداث في جافاسكربت. سنتطرق لأكثر الأحداث شيوعًا أدناه. أحداث الفأرة أحداث الفأرة هي من بين الأحداث الأكثر استخدامًا. تشير إلى الأحداث التي تنطوي على نقر زر الفأرة أو تحريك المؤشر وتحويمه (hovering). تتوافق هذه الأحداث أيضًا مع الإجراء المماثل على جهاز يعمل باللمس. الحدث الوصف click يُطلَق عند الضغط بزر الفأرة أو عند الإفلات على العنصر dblclick يُطلَق عندما يتم النقر فوق عنصر مرتين mouseenter يُطلَق عندما يدخل المؤشر داخل عنصر mouseleave يُطلَق عندما يترك المؤشر عنصرًا mousemove يُطلَق في كل مرة يتحرك فيها المؤشر داخل عنصر ما`` إن حدث النقر click هو حدثٌ مركَّب يتألف من الجمع بين حدثين هما mousedown و mouseup، ويُطلَق حينَ الضغط على زر الفأرة لأسفل أو رفعه، على التوالي. يؤدي استخدام الحدثين mouseenter و mouseleave بالترادف إلى إعادة إنشاء تأثير التحويم الذي يستمر ما دام مؤشر الفأرة على العنصر. أحداث النموذج أحداث النموذج form هي إجراءات تتعلق بالنماذج، مثل عناصر الإدخال input التي يتم تحديدها أو غير المحددة، والنماذج التي يتم إرسالها. الحدث وصف submit يُطلَق عند إرسال النموذج focus يُطلَق عند تلقِي عنصر (مثل المدخلات) التركيز blur يُطلَق حينَ يفقد العنصر التركيز يتحقق التركيزfoucus عند تحديد عنصر، على سبيل المثال، من خلال النقر بالفأرة أو الانتقال إليه عبر المفتاح TAB غالبًا ما تستخدم جافاسكربت لإرسال النماذج وإرسال القيم إلى لغة الواجهة الخلفية. تتمثّلُ ميزة استخدام جافاسكربت لإرسال النماذج بأنه لا يتطلب إعادة تحميل الصفحة لإرسال النموذج، ويمكن استخدام جافاسكربت للتحقق من حقول الإدخال المطلوبة. أحداث لوحة المفاتيح تُستخدم أحداث لوحة المفاتيح لمعالجة إجراءات لوحة المفاتيح، مثل الضغط على مفتاح ما، ورفع الضغط عن مفتاح، واستمرار ضغط مفتاح. الحدث وصف keydown يُطلَق مرة واحدة عند الضغط على أي مفتاح keyup يُطلَق مرة واحدة عندما يتم تحرير (إفلات الضغط) المفتاح المضغوط keypress يُطلَق بشكل مستمر أثناء الضغط على المفتاح قد يبدو الحدثين keydown و keypress متشابهين إلا أنهما لا يتيحان الوصول إلى جميع المفاتيح بالضبط. في حين أنَّ keydown يقرّ بكل ضغطَة (أي الضغط على أي مفتاح)، يستثني الحدث keypress المفاتيح التي لا يولد الضغط عليها حرفًا، مثل المفاتيح SHIFT و DELETE و ALT وغيرها. أحداث لوحة المفاتيح لها خصائص محددة للوصول إلى المفاتيح الفردية. إذا مُرِّرَ المعامل الأول (الكائن event) عبر مستمع الحدث، فيمكننا الوصول إلى مزيد من المعلومات حول الإجراء الذي حدث أهمها ثلاثة خصائص تتعلق بكائنات لوحة المفاتيح هي: keycode و key و code. إذا ضغط المستخدم على المفتاح a على لوحة المفاتيح، فستظهر الخصائص التالية المتعلقة بهذا المفتاح: خاصية وصف مثال keyCode عدد يتعلق بالمفتاح 65 key يمثل اسم الحرف a code يمثل المفتاح الفعلي الذي يتم الضغط عليه keyA لإظهار كيفية جمع هذه المعلومات عبر وحدة التحكم جافاسكربت، يمكننا كتابة سطور التعليمات البرمجيّة التالية: // keyCode و key و code التحقق من الخاصيات document.addEventListener('keydown', event => { console.log('key: ' + event.keyCode); console.log('key: ' + event.key); console.log('code: ' + event.code); }); بمجرد ضغط ENTER في الطرفية، يمكننا آنذاك الضغط على أي مفتاح من لوحة المفاتيح، في هذا المثال، سنضغط a. Output keyCode: 65 key: a `code: KeyA` إنَّ الخاصيَّةَ keyCode هي عدد يمثلُّ قيمة المفتاح الذي ضُغِطَ بينما تمثِّل خاصيَّةَ key اسم الحرف، التي يمكن أن تتغيّر - على سبيل المثال، ضغط المفتاح a مع SHIFT سيؤدي A. وتمثِّلُ الخاصيِّةُ code المفتاح الفيزيائي على لوحة المفاتيح. لاحظ أنَّ keyCode في طريقها إلى الزوال ويفضل استخدام code في مشاريع جديدة. لمعرفة المزيد، يمكنك عرض القائمة الكاملة للأحداث على شبكة مطوري Mozilla. كائنات الحدث يتكون الكائن Event من الخاصيّات والتوابع التي يمكن لجميع الأحداث الوصول إليها. بالإضافة إلى Event الكائن العام، كل نوع من أنواع الأحداث له امتدادات خاصة به، مثل KeyboardEvent و MouseEvent. سيمرَّر الكائن Event من خلال دالّة المستمع كمعامل. وعادة ما يكتب باسم event أو e. يمكننا الوصول إلى الخاصية code التابعة للـحدث keydown لتكرار عناصر تحكم لوحة المفاتيح في لعبة مثلًا. قم بإنشاء ملف HTML يحوي العنصر <p> وحملّه في المتصفح. الملف event-test-p.html: <!DOCTYPE html> <html lang="en-US"> <head> <title>Events</title> </head> <body> <p></p> </body> </html> ثم اكتب شفرة جافاسكربت التالية في طرفية أدوات المطور . // تمرير حدث إلى مستمع document.addEventListener('keydown', event => { var element = document.querySelector('p'); // إسناد قيمة رموز المفاتيح المراد الضغط عليها إلى متغيرات var a = 'KeyA'; var s = 'KeyS'; var d = 'KeyD'; var w = 'KeyW'; // تحديد الاتجاه لكل مفتاح switch (event.code) { case a: element.textContent = 'Left'; break; case s: element.textContent = 'Down'; break; case d: element.textContent = 'Right'; break; case w: element.textContent = 'Up'; break; } }); عند الضغط على أحد المفاتيح - a، أو s، أو d، أو w سترى خرجًا مشابهًا لما يلي: يمكنك الاستمرار في تطوير كيفية استجابة المتصفح للمستخدم حينَ الضغط على هذه المفاتيح، ويمكن إنشاء موقع ويب أكثر ديناميكية. سنتطرق إلى إحدى خصائص الأحداث الأكثر استخدامًا: الخاصيِّةُ target. في المثال التالي ، لدينا ثلاثة عناصر div ضمن قسم واحد section. الملف event-test-div.html: <!DOCTYPE html> <html lang="en-US"> <head> <title>Events</title> </head> <body> <section> <div id="one">One</div> <div id="two">Two</div> <div id="three">Three</div> </section> </body> </html> باستخدام event.target في جافاسكربت ضمن طرفيّة أدوات المطور (Developer Console)، يمكننا وضع مستمع حدث واحد على العنصر section الخارجي والحصول على العنصر الأكثر تداخلًا. const section = document.querySelector('section'); // طباعة الهدف المحدَّد section.addEventListener('click', event => { console.log(event.target); }); يؤدي النقر فوق أي عنصر من هذه العناصر إلى إعادة إخراج العنصر المحدد ذي الصلة إلى الطرفية باسـتخدام event.target. إتاحة وضع مُسْتَمع حَدَث واحد فقط، يُمَكِّنُ من الوصول إلى العديد من العناصر المتداخلة، وهذا في غاية الأهمية. باستخدام الكائن Event، يمكننا إعداد استجابات متعلقة بجميع الأحداث، بما في ذلك الأحداث العامة والإضافات الأكثر تحديدًا. الخلاصة الأحداث هي الإجراءات التي تحدث على موقع ويب، مثل النقر فوق الفأرة أو تحويم المؤشر أو إرسال نموذج أو تحميل صفحة أو الضغط على مفتاح في لوحة المفاتيح. تصبح جافاسكربت تفاعليًا وديناميكيًا حقًا عندما نتمكن من جعل مواقع الويب تستجيب للإجراءات التي اتخذها المستخدم. تعلمنا -في هذا الدليل ما هي الأحداث، وأمثلة عن الأحداث الشائعة، والفرق بين معالجات الأحداث ومستمعي الأحداث، وكيفية الوصول إلى الكائن Event. ستتمكن من إنشاء مواقع وتطبيقات ديناميكية، باستخدام هذه المعلومات. ترجمة - وبتصرف- للمقال Understanding Events in JavaScript لصاحبته Tania Rascia
  3. أسامة عبد الهادي
    مزيد من المعلومات حول "دليلك إلى ImageMagick: تغيير حجم الصور عبر سطر الأوامر"
    دعنا نفترض أنَّك تكتب سلسلة من البرامج التعليمية لـ Blender وأنك تستخدم PrintScreen لأخذ لقطات الشاشة. يمنحك هذا دليلًا مليئًا بالصور الضخمة غير المُحسَّنة للتحميل إلى صفحة ويب وعرضها. آخر شيء تريد القيام به هو تغيير حجمها يدويًا. انت محظوظ! باستخدام خيار تغيير الحجم ‎-resize يمكنك بسرعة وسهولة تغيير حجم هذه الصور إلى حجم يمكن التحكم فيه. ضع كل الصور التي تريد توسيع نطاقها في مجلد وانتقل إلى موقع الدليل عبر سطر الأوامر. ثم أدخل الأمر التالي: mogrify -resize 960x528 *.png يقوم هذا الأمر بتغيير حجم جميع ملفات png. في الدليل إلى حجم 960 بكسل في 528 بكسل. ربَّما الارتفاع ليس بنفس أهمية العرض. يمكنك ببساطة كتابة الأمر السابق على النحو التالي: mogrify -resize 960 *.png سيؤدي هذا إلى تغيير حجم جميع صورك إلى 960 بكسل، وسيتمُّ تغيير الارتفاع وفقًا لذلك، محافظًا على نسبة العرض إلى الارتفاع. ربما لديك الطول والعرض الذي تريده، لكنك ترغب في الحفاظ على نسبة العرض إلى الارتفاع. يمكنك إدخال الأمر على النحو التالي: mogrify -resize 960x528! *.png سيؤدِّي ذلك إلى توسيع نطاق صورك إلى 960 × 528 بكسل متى كان ذلك ممكناً، لكنَّه سيحافظ على نسبة العرض إلى الارتفاع لتلك الصور التي لن يتم تكبيرها إلى هذه الأبعاد بالضبط. ترجمة -وبتصرّف- للمقال ImageMagick Tutorial: How To Batch Resize Images on the Command Line لصاحبه Jared
  4. أسامة عبد الهادي
    مزيد من المعلومات حول "تعديل الخاصيات والأصناف والأنماط في شجرة DOM"
    تعلمنا فيما سبق في هذه السلسلة "كيف تجري تغيرات على شجرة DOM" والتعامل مع شجرة DOM من إنشاء، وإدراج، واستبدال وإزالة عناصر من المستند بتوابع مضمنة. أصبحت الآن مؤهلًا لاستخدام قدرات JavaScript التفاعلية وتعديل عناصر الويب لبزيادة كفاءتك في التعامل مع شجرة DOM. table { width: 100%; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } سنكمل في هذا المقال موضوع إجراء التعديل على شجرة DOM بتعديل الأنماط والأصناف والخاصيات الأخرى لعقد عناصر HTML. وهذا سيعطيك فهمًا أكبر للتعامل مع العناصر الأساسية لشجرة DOM. استعراض تحديد العناصر استخدمت مكتبة شائعة ضمن الجافاسكربت تسمى jQuery لتحديد وتعديل عناصر شجرة DOM. سهَّلت هذه المكتبة من اختيار عنصر أو أكثر ضمن المستند وتعديلها وتغييرها في آن معًا. راجعنا في مقال "الوصول إلى العناصر في شجرة DOM" التوابع الخاصة بـ DOM التي تحدد العقد وتعدل عليها عبر جافاسكربت الصرفة فقط. لنتذكر أن التابعين document.querySelector()‎ و document.getElementById()‎ يستخدمان للوصول إلى عنصر واحد. نستطيع الوصول العنصر باستخدام العنصر div أو عبر الخاصية id. <div id="demo-id">Demo ID</div> بالإمكان اختيار أي عنصر في الصفحة بأي نوع من المحدِّدات باستخدام التابع querySelector()‎. // كلا التابعين سيعيد عنصرًا واحدًا const demoId = document.querySelector('#demo-id'); بإمكاننا تحديث جزء من العنصر كالنص داخله بسهولة، حينما نصل إلى العنصر. // تغيير النصّ لعنصر واحد demoId.textContent = 'Demo ID text updated.'; حينما نصل إلى عدة عناصر باستخدام محدد مشترك، مثل صنف محدد، يمكننا إجراء تعديل على جميع العناصر داخل حلقة تكرارية. لدينا عنصرين من div ذوي صنف مشترك. <div class="demo-class">Demo Class 1</div> <div class="demo-class">Demo Class 2</div> للإمساك بجميع العناصر ذات الصنف demo-class مثلًا، سنستخدم querySelectorAll()‎، وسنستخدم forEach()‎ للوصول إلى العنصر وتطبيق التغيير. كما بالإمكان الوصول إلى عنصر محدد بـ querySelectorAll()‎ بنفس الطريقة التي تستخدمها مع مصفوفة، باستخدام الأقواس المربعة. // demo الحصول على قائمة بجميع العناصر ذات الصنف const demoClasses = document.querySelectorAll('.demo-class'); // تغيير النصّ لعدّة عناصر باستخدام حلقة تكراريّة demoClasses.forEach(element => { element.textContent = 'All demo classes updated.'; }); // الوصول للعنصر الأول ضمن القائمة demoClasses[0]; هذا هو أحد أهم الاختلافات التي يجب معرفتها عند الانتقال من jQuery إلى JavaScript الصرفة. لن تشرح العديد من الأمثلة على تعديل العناصرعملية تطبيق هذه التوابع والخصائص على عناصر متعددة. غالبًا ما يتم إرفاق الخاصيات والتوابع الواردة في هذه المقالة بـ «مسمتعي الأحداث» (event listener) من أجل الاستجابة للنقرات، التحويم (hover)، ومشغلات (triggers) أخرى. ملاحظة: سيعيد التابعان getElementsByClassName()‎ و getElementsByTagName()‎ مجموعة عناصر HTML لا يمكنها استعمال forEach()‎ على عكس العناصر التي يعيدها التابعquerySelectorAll()‎. في هذه الحالات، ستحتاج إلى استخدام حلقة for الاعتيادية للتكرار عبر مجموعة العناصر تلك. تعديل الخاصيات تحتوي الخاصيات (التي هي قيم) على معلومات إضافية عن عناصر HTML. تأتي عادةً في ثنائيات الاسم/القيمة، وقد تكون أساسية اعتمادًا على العنصر. إن الخاصية src التابعة للعنصرimg، والخاصية href التابعة للعنصر a، وكذلك الخاصيات class و id، و style هي أحد أكثر الخاصيات شيوعًا. للحصول على قائمة كاملة بخاصيات HTML، قم بعرض قائمة الخاصيات على شبكة مطوري Mozilla. ستُسبَق العناصر المخصصة التي ليست جزءًا من معيار HTML بـالبادئة data-. لدينا أربع توابع لتعديل خاصيات العنصر في جافاسكربت: التابع الوصف مثال hasAttribute()‎ يعيد القيمة true أو false إن كان العنصر يملك خاصية محدَّدة أم لا. element.hasAttribute('href');‎ getAttribute()‎ يعيد قيمة الخاصية المحددة أو null. element.getAttribute('href');‎ setAttribute()‎ يضيف أو يحدّث قيمة لخاصية محددة. element.setAttribute('href', 'index.html');‎ removeAttribute()‎ يزيل خاصية محدَّدة من عنصر. element.removeAttribute('href');‎ لننشئ ملف HTML جديد يحوي العنصر img مع خاصية واحدة. سنربط العنصر بصورة عامة عبر رابط، إلا أنه من الممكن ربط الوسم بصورة محلية في حال عدم توفر اتصال بالإنترنت. attributes.html <!DOCTYPE html> <html lang="en"> <body> <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png"> </body> </html> افتح الملف السابق على متصفح متطور، وافتح الطرفية في وحدة تحكم المطور (Developer Console)، وستشاهد ما يلي: سنختبر طرق الخاصية (دالات) عبر المثال التالي: // إسناد عنصر صورة const img = document.querySelector('img'); img.hasAttribute('src'); // يعيد القيمة المنطقية صح img.getAttribute('src'); // "...shark.png" يعيد img.removeAttribute('src'); // وقيمتها src يحذف الخاصية أزلت الخاصية src والقيمة المرتبطة بها الموجودة العنصر img بعد المثال السابق، ولكن بإمكانك إعادة تعيين تلك الخاصية وإسناد القيمة لصورة بديلة باستخدام img.setAttribute()‎: img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png'); يمكننا تعديل الخاصية مباشرةً بإسناد قيمة جديدة إليها كخاصية للعنصر، وإعادة تعيين src للصورة shark.png بالشكل التالي: img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png'; يمكن تحرير أي خاصيّة بهذا التابع وكذلك مع التوابع المذكورة أعلاه. إن التابعينhasAttribute()‎ و getAttribute()‎ عادةً ما يُستخدمان مع عبارات شرطية، بينما تُستخدَم setAttribute()‎ و removeAttribute()‎ مباشرةً لتعديل شجرة DOM. تعديل الأصناف تتوافق الخاصية "class" مع محددات الصنف في CSS. لا يجب الخلط مع أصناف ES6، وهو نوع خاص من دالات جافاسكربت. تُسْتخدمُ أصناف CSS لتطبيق الأنماط على عناصر متعددة، على عكس المعرفات التي لا يمكن أن توجد إلا مرة واحدة في كل صفحة. في جافاسكربت، لدينا الخاصيتين className و classList للعمل مع الخاصية class. التابع / الخاصية الوصف مثال className قراءة أو كتابة قيمة الخاصية class. element.className; classList.add()‎ إضافة قيمة صنف أو أكثر. element.classList.add('active'); classList.toggle()‎ تبديل صنف محدَّد أي إضافة إن لم يكن موجودًا أو إزالته إن كان موجودًا. element.classList.toggle('active'); classList.contains()‎ تحقق إذا كانت قيمة الصنف موجود. element.classList.contains('active'); classList.replace()‎ استبدال قيمة صنف موجود بقيمة صنف جديد. element.classList.replace('old', 'new'); classList إزالة قيمة صنف. element.classList.remove('active'); سنقوم بإنشاء ملف HTML آخر يحوي عنصرين بعدة أصناف للعمل مع توابع الصنف. الملف classes.html: <!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <div>Div 1</div> <div class="active">Div 2</div> </body> </html> عند فتح الملف classes.html في متصفح الويب، يجب أن تتلقى عرضًا مماثلاً لما يلي: عُرِّفت الخاصيِّة className بهذا الاسم لمنع التعارض مع الكلمة المحجوزة class الموجودة في جافاسكربت وغيرها من اللغات التي لديها إمكانية الوصول إلى شجرة DOM. بإمكانك استخدام className لإسناد قيمة مباشرة إلى الصنف. // div اختيار أول عنصر const div = document.querySelector('div'); // الأول div للعنصر warning إسناد الصنف div.className = 'warning'; أسندنا الصنف warning (تحذير) المعرف في قيم CSS للملف classes.html للعنصر div الأول. ستتلقى المُخْرَجَ التالي: لاحظ أنه في حال وجود أصناف مسبقًا على العنصر، فإن هذا سيؤدي إلى تجاوزها. يمكنك إضافة عدة أصناف بفصلها بمسافة فارغة باستخدام الخاصية className، أو استخدامها دون معاملات الإسناد للحصول على قيمة الصنف في العنصر. الطريقة الأخرى لتعديل الأصناف هي عن طريق الخاصية classList، والتي تأتي مع بعض الدالات التوابع المفيدة. هذه التوابع مشابهة للتوابع addClass، و removeClass، و toggleClass الموجودة في jQuery. // الثاني عن طريق اسم الصنف div اختيار العنصر const activeDiv = document.querySelector('.active'); activeDiv.classList.add('hidden'); // hidden إضافة الصنف activeDiv.classList.remove('hidden'); // hidden إزالة الصنف activeDiv.classList.toggle('hidden'); // hidden إضافة أو إزالة الصنف activeDiv.classList.replace('active', 'warning'); // active مكان الصنف warning تبديل الصنف بعد تنفيذ التوابع أعلاه، ستبدو صحفة الويب الخاصة بك كما يلي: إن استخدام التابع classList.add()‎ سيضيف صنفًا جديدًا إلى قائمة الأصناف الموجودة، على عكس استخدام className. يمكنك أن تضيف عدة أصناف مفصولة بالفاصلة. من الممكن أيضًا استخدام setAttribute لتعديل صنف العنصر. تعديل الأنماط تعتبر الخاصية style من الأنماط المضمنة على عنصر HTML. سيتم تطبيق الأنماط على العناصر عبر ورقة أنماط غالبًا، كما فعلنا سابقًا في هذه المقالة، ولكن في بعض الأحيان يتعين علينا إضافة أو تعديل نمط مضمَّن مباشرة. سنقدِّمُ مثالًا قصيرًا لشرح كيفية تعديل الأنماط باستخدام جافاسكربت. يوجد ملف HTML جديد أدناه بعنصر div يحتوي على بعض الأنماط المضمَّنة فيه مباشرةً. الملف styles.html: <!DOCTYPE html> <html lang="en"> <body> <div style="height: 100px; width: 100px; border: 2px solid black;">Div</div> </body> </html> عند فتح الملف styles.html في المتصفح، سيبدو على الشكل التالي: إحدى طرق تعديل الأنماط هي باستعمال التابع setAttribute()‎. // div إمساك العنصر const div = document.querySelector('div'); // div تطبيق النمط على العنصر div.setAttribute('style', 'text-align: center'); ومع ذلك، سيؤدي إلى إزالة جميع الأنماط الضمنية من العنصر (أي حذف العنصر style السابق بما يحويه وإضافة العنصر الجديد مع القيمة المعطاة). وبما أن هذا ليس هو التأثير المطلوب، فمن الأفضل استخدام الخاصية style مباشرةً بالشكل التالي: div.style.height = '100px'; div.style.width = '100px'; div.style.border = '2px solid black'; تُكْتَبُ خاصيات الـ CSS في حالة أسياخ الشواء (kebab-case)، وهي كلمات بأحرف صغيرة مفصولة بشرطة. لاحظ أنه من المهم معرفة أن حالة أسياخ الشواء لخاصيات الـ CSS لا يمكن استخدامها مع الخاصية style جافاسكربت. بدلاً من ذلك، ستستبدل بمكافئها من حالة سنام الجمل (الحرف الأول صغير وباقي الكلمات متصلة بأحرف كبيرة). بعبارة أخرى، سنستخدم textAlign بدلًا من text-glign في الخاصية style للجافاسكربت. // إلى دائرة وتوسيط النصِّ عاموديًا div تحويل العنصر div.style.borderRadius = '50%'; div.style.display = 'flex'; div.style.justifyContent = 'center'; div.style.alignItems = 'center'; بعد الانتهاء من تعديلات النمط أعلاه، سيظهر الملف styles.html دائرة على الشكل التالي: إذا تم تطبيق العديد من التغييرات المتعلقة بالنمط على عنصر ما، فإن أفضل مسار للعمل هو تطبيق الأنماط على صنف جديد. ومع ذلك، هناك بعض الحالات التي يكون فيها تعديل خاصية النمط المضمن ضروريًا أو أكثر وضوحًا. الخلاصة تحتوي عناصر HTML غالبًا على معلومات إضافية مسندة إليها عبر الخاصيات. قد تتكون الخاصيات من ثنائية الاسم/القيمة، وعدد قليل من الخاصيات الأكثر شيوعًا هي class و style. تعلمنا في هذا الدليل كيفية الوصول إلى خاصيات عنصر HTML ضمن شجرة DOM وتعديلها وحذفها باستخدام جافاسكربت. كما تعلمنا إضافة أصناف CSS وإزالتها وتبديلها واستبدالها في عنصر، وكيفية تحرير أنماط CSS. ترجمة -وبتصرف- للمقال Understanding the DOM — Document Object Model لصاحبته Lisa Tagliaferri
  5. أسامة عبد الهادي
    مزيد من المعلومات حول "دليلك إلى ImageMagick: اقتصاص الصور عبر سطر الأوامر"
    دعنا نفترض أنك تكتب سلسلة من البرامج التعليمية على Blender وأنك تستخدم مفتاح PrintScreen لالتقاط لقطات الشاشة. إنَّ مفتاح PrintScreen رائع، لكنه يمسك بكل شيء. ربَّما لا تريد أن يظهر تطبيقك في كل صورة. وربما لا تريد تحرير عشرات الصور يدويًا. أنت محظوظ! لدى برنامج ImageMagick وسيلة سهلة لاستخدام وظيفة الاقتصاص للصور التي يمكنك تنفيذها بسرعة وسهولة من سطر الأوامر. إذا لم تكن قد قمت بالفعل بتثبيت البرنامج، فاحصل على ImageMagick بالطريقة السهلة: sudo apt-get install imagemagick ضع كل الصور التي تريد اقتصاصها في مجلد وانتقل إليه عبر سطر الأوامر. في المثال الذي أستخدمه هنا، أرغب في قطع البيكسلات السفلية البالغ عددها 25 بكسل من سلسلة صور png. نفِّذْ الأمر التالي للقيام بذلك: mogrify -format png -gravity south -chop 0x25 *.png الرايات التي استعملناها مع الأمر هي: ‎:-format png ينص الخيار بإخراج الملف بصيغة png. ‎:-gravity south ينصُّ الخيار ببدء الاقتصاص من أسفل الصورة. ‎:-chop 0x25 ينصُّ الخيار بقصَّ 25 بكسلًا من الارتفاع. ‎*.png: ينصُّ الخيار بتطبيق جميع ما سبق على أي ملف ذو اللاحقة png. أدناه ملفي الأصلي: والصورة المشذبة حديثا: ترجمة -وبتصرّف- للمقال ImageMagick Tutorial: How To Batch Crop Images on the Command Line لصاحبه Jared
  6. أسامة عبد الهادي
    مزيد من المعلومات حول "دليل إعداد خادم ويب محلي خطوة بخطوة"
    هذا الدليل مناسب أيضًا لإعداد خادم WordPress المحلي الخاص بك. إن اختبار العديد من الأشياء (نظام إدارة المحتوى، والسمات وما إلى ذلك) على الإنترنت يسبب متاعبًا كبيرة وله العديد من العيوب، لذا نلجأ عادةً إلى ضبط وتشغيل خادم محلي على حاسوبنا لإجراء مثل عمليات الاختبار تلك. إن أردت التجريب على خادم حقيقي، تحتاج إلى شراء نطاق (domain)، والدفع مقابل الاستضافة، واستخدام سرعة تحميل بطيئة لمزودي الإنترنت لتحميل الملفات عبر بروتوكول نقل الملفات ftp، وكلما أردت تغيير بعضَ إعدادات Apache أو PHP، يتعيَّنُ عليك الاتصال بمزوِّد الاستضافة والانتظار لبعض الوقت حتى يردّوا. يمكنني سرد مساوئ أخرى، لكنني أعتقد أن الصورة قد اتضحت. هناك العديد من الخوادم التي تمثِّل عدّة حزم في حزمة واحدة، والتي سيتمُّ تثبيتها جميعًا مثل WAMP أو XAMPP، لكني لا أحبُّها. هذه البرامج -برأيي- بمثابة قمامة غير منضبطة على الكمبيوتر وغير محدَّثة في كثيرٍ من الأحيان. لكنَّها حلٌّ سريع وجيد للأشخاص الذين لا يريدون أن يتعلموا عملَ كلِّ شيء ويحتاجون طريقةً سريعة لتثبيت خادم ويب محلي، لاختبار مشاريعهم. هذا الدليل أكثر تعقيدًا من مجرّد كونه حلٌّ يعتمد علىWAMP أو XAMPP ولكن الميزة الأكبر أنَّ لديك كامل التحكم، لأنّك تضبط بنفسك كل شيء (الخادم، قاعدة البيانات ضمن أية حزمة). ويمكنك أن تكون دائمًا مطلعًا على التحديثات وتستمتع بأحدث الإصلاحات والتحسينات في حزم Apache و PHP و MySQL. بمجرّد إتقان هذا الدّليل، فستوافق على إمكانيّة تثبيت خادم محليّ باستخدام الحزم الأصلية في بضعِ دقائق، مثل WAMP أو XAMPP. تحديث الحزم الجديدة بسيطٌ للغاية أيضًا. قُمْ بتثبيت الحزمة الجديدة على الحزمة الحالية وانتهى الأمر. من ينبغي أن يقرأ هذا المقال لإعداد خادم الويب المحلي؟ يعدُّ هذا البرنامج التعليمي رائعًا لمطوّري الويب ومصمِّمي الويب الذين يحتاجون إلى اختبار التطبيقات المستندة للويب في الوقت الفعلي أو السمات الخاصة بـ WordPress أو Joomla أو Drupal دون الحاجة إلى اتصال بالإنترنت أو استضافة المواقع. سيغطي، أيضًا، ويُعْلِمْكَ بأهمِّ العثرات والأخطاء غير المتوقعة التي تحدث في بعض الأحيان والتي لا تغطيها البرامج التعليمية الأخرى. لذلك يجب أن يكون لدى المستخدمين الذين سيتبعون هذا البرنامج التعليمي خطوة بخطوة خادمُ ويب مضيف محلي، يعمل من دون أخطاء غير متوقعة في النهاية. قرَّرتُ أن أكتب هذا البرنامج التعليمي لأنني تابعت العديد من البرامج التعليمية على الويب، إلا أنني لم أتمكن من جعل خوادمي المحلية التي أنشئها تعمل من المحاولة الأولى، لذلك قضيت عدة ساعات في البحث عن الأخطاء غير المتوقعة وإصلاحها، والتي غطيتها كلها في هذا الدليل التعليمي . اقتباسات استخدم غالبًا علامات الاقتباس لكتابة التعليمات والأوامر وأسماء تسجيل الدخول وكلمات المرور والمسارات وأسماء المجلدات التي تحتاج إلى تعديل بما يناسبك. لذلك كلِّما رأيت علامات الاقتباس في هذا الدليل، استخدم دائمًا ما بين علامات الاقتباس فقط. سيتمّ وضع علامة كنصٍّ غامق أيضًا. في بعض الأحيان توجد علامات اقتباس بين علامات الاقتباس، تكون هذه علامات الاقتباس (بين علامات الاقتباس) مهمة في ملفات الضبط. المتطلبات تم إنشاء هذا الدليل التعليمي على (ويندوز7 32 بت نهائي) 32bit Windows 7 Ultimate في برنامج VMware Player، لكنني أستخدمه في تثبيت حقيقي لـ (ويندوز7 64 بت نهائي) 64bit Windows 7 Ultimate دون أي مشكلة. على أي حال، يمكن تطبيق هذا الدليل على إصدارات ويندوز اللاحقة مع اختلاف في الإصدارات. لذلك، في هذه الحالة يجب أن تعمل على أي نظام تشغيل Microsoft. حتى إذا كانت الحزم 32 بت، فإنها تعمل على أنظمة تشغيل 64 بت دون أية مشاكل تتعلق بعدم التوافق. هناك حزم 64 بت غير رسمية لـ Apache و PHP، ولكن التثبيت أكثر تعقيدًا ولا يتم تحديثها غالبًا. يحتوي الدعم الرسمي لأنظمة التشغيل 64 بت على MySQL، لكنه لن يعمل بشكل صحيح مع نسخة 32 بت من Apache و PHP. التنزيلات Apache 2.2.15 win32 x86 no ssl msi PHP 5.3.2 VC6 x86 Thread Safe Installer phpMyAdmin 3.3.2 zip WordPress (اختياري) إذا وجدت أي إصدارات جديدة من هذه الحزم، فيمكنك استخدامها أيضًا، وستكون الخطوات هي نفسها. خطوات ما قبل التثبيت الخطوة الأولى: إنشاء المجلدات اللازمة أنشئ مجلدًا للتثبيت وآخر لتخزين صفحات الويب الخاصة بالاختبار. أنصحك باتباع نفس الهيكل؛ وإلا فيتعيّن عليك تغيير جميع المسارات إلى إعداداتك الخاصة أثناء خطوات البرنامج التعليمي. يسمى المجلد الأول الذي أقوم بإنشائه بـ "dev" (من الكلمة "تطوير") في جذر "C:\‎". يسمَّى المجلد الثاني الذي أقوم بإنشائه "progs" في "C:\dev\‎" والثالث يسمى "www" في "C:\dev\‎" ، لذا بعد ذلك يجب أن يكون لديك ثلاثة مجلدات جديدة. C:\dev\‎ C:\dev\progs\‎ لتثبيت Apache و PHP و Mysql C:\dev\www\‎ - هذا المجلد بمثابة مجلد لبروتوكول FTP عند الاستضافة، وسيتم استخراج جميع صفحات الويب الخاصة بك فيه الخطوة الثانية: إيقاف التحكم في حساب المستخدم يمكن لمستخدمي نظام التشغيل Windows XP تخطي هذه الخطوة! إنه لمستخدمي فيستا و ويندوز 7 و ويندوز 10 وهي تعطيل UAC! ستقوم بذلك بالنقر فوق Start> ‏Control Panel> ‏User Accounts (ابدأ> لوحة التحكم> حسابات المستخدمين) ثم انقر فوق "تغيير إعدادات التحكم في حساب المستخدم" (Change User Account Control settings). في النافذة التالية (تذكر الموضع الافتراضي لشريط التمرير)، اسحب شريط التمرير لأسفل حتى "لا تبلغني أبدًا متى: ..."، انقر فوق "موافق" وأغلق النوافذ. بالنسبة لمستخدمي نظام التشغيل Vista - ما عليك سوى إيقاف التحكم في حساب المستخدم. لا تقم بإعادة تشغيل جهاز الكمبيوتر الآن! يجب إعادة شريط التمرير إلى الإعدادات الافتراضية بعد التثبيت الناجح لـ Apache و PHP و MySQL، وذلك لأسباب أمنية. الخطوة الثالثة: تعديل ملف المضيفين hosts في ويندوز في بعض الحالات، لم أستطعْ التثبيت حتى قمت بهذه الخطوة. لم أختبر هذا على نظام التشغيل Windows XP، لذلك يمكن لمستخدمي XP أيضًا تخطي هذه الخطوة، لأنه في رأيي ليست هناك من حاجة إليها. غالبًا ما يتمُّ وضع ملف المضيفين في المسار "C:\Windows\System32\drivers\etc\‎" وهو ملف مخفي وللقراءة فقط. لمشاهدة الملفات المخفية، انتقل إلى ابدأ> لوحة التحكم> خيارات المجلد، انقر فوق اللسان "عرض"، وحدد "إظهار الملفات والمجلدات ومحركات الأقراص المخفية"، ثم انقر فوق موافق. في أنظمة x64، لن يكون الملف مرئيًا في برنامج طرف ثالث كمديري ملفات 32bit، مثل Total Commander حتى وإن غيَّرت الإعدادات لمشاهدة الملفات والمجلدات المخفيّة، لأن برامج 32bit لا يمكنها رؤية ملفات ومجلدات 64 بت. لذا انتقل إلى هذا المجلد من خلال مستكشف Windows الأصليّ للملفات للوصول إلى ملف المضيفين بشكل صحيح. افتح الملف في المفكرة، وابحث عن السطر: ‎# 127.0.0.1 localhost، وحذف الرمز #، واحفظ الملف، والآن يمكنك إعادة تشغيل الكمبيوتر لتطبيق الإعدادات. الآن انتهينا من خطوات التثبيت المسبق. تثبيت الخادم Apache وضبطه قم بتشغيل تثبيت Apache عبر فتح الملف الذي نزَّلته، وانقر فوق التالي، وتحقق من أنك تقبل الشروط، ثم انقر فوق التالي، ثم التالي مرة أخرى. في الشاشة التالية، قم بملء إعدادات الخادم، كما في الصورة أدناه، وانقر فوق التالي مرة أخرى. في الصفحة التالية، حدد النوع Custom Setup (الإعداد المخصّص) وانقر فوق (التالي). اترك جميع الميزات كما هي، قم بتغيير مسار التثبيت فقط إلى: "C:\dev\progs\Apache\‎" وانقر فوق "التالي". الآن انقر فوق تثبيت. سترى أيقونة جديدة على شريط مهام windows مع مثلث أخضر صغير يشير إلى تثبيت Apache وتشغيله. لاختباره بشكل صحيح افتح المتصفح Internet Explorer أو Firefox أو أي متصفح تستخدمه واكتب "localhost" في شريط العناوين. إذا سارت الأمور على ما يرام، يجب أن ترى "إنه يعمل!" "It Works!". نحرِّرُ ملف ضبط Apache! ننتقل إلى المجلد "C:\dev\progs\Apache\conf\‎" ونفتح الملف "httpd.conf" في المفكرة. أوصي باستخدام محرر نصوص متقدم مثل Adobe Dreamweaver أو PSPad مجاني، من أجل تحرير أفضل وأكثر راحة. حيث يمكنك رؤية أرقام الأسطر والتنقل عبر الملف النصي بسهولة. انتقل إلى السطر 117 أو ابحث عن "‎#LoadModule rewrite_module modules/mod_rewrite.so" واحذف "#" في بداية السطر - وبمعنى آخر، أزلْ التعليق (جيد لعناوين URL جميلة). انتقل إلى السطر 178 أو ابحث عن "DocumentRoot "C:/dev/progs/Apache/htdocs"‎" واستبدل به "DocumentRoot "C:/dev/www"‎ " انتقل إلى السطر 205 أو ابحث عن "<Directory "C:/dev/progs/Apache/htdocs">" واستبدل به "<Directory "C:/dev/www">" انتقل إلى السطر 208 أو ابحث عن " Options Indexes FollowSymLinks" واستبدل به "Options Includes Indexes FollowSymLinks MultiViews". انتقل إلى السطر 225 أو ابحث عن "AllowOverride None" واستبدل به " AllowOverride All". انتقل إلى السطر 240 أو ابحث عن "DirectoryIndex index.html" واستبدل به " DirectoryIndex index.html index.htm index.php". انتقل إلى السطر 382 أو ابحث عن "AddType application / x-gzip .gz .tgz" لا تستبدل أي شيء، فقط أضف سطرًا جديدًا أسفل هذا السطر بالقيمة التالية: "AddType application / x-httpd-php .php". احفظ الملف، واخرج من برنامج المحرر وأعدْ تشغيل Apache. يمكنك القيام بذلك من خلال النقر على أيقونة Apache في شريط المهام ثم نقل المؤشر على Apache 2.2 والنقر فوق "إعادة التشغيل". إذا قمت بتوجيه متصفحك مرة أخرى إلى مضيف محلي "localhost"، فلن ترَ "إنه يعمل!" ولكن سترى شيئًا مثل "Index Of". لا تقلق، إنه بسبب تغيير المجلد من حيث يقوم Apache بترجمة صفحات الويب. تهانينا، اكتمل تثبيت اباتشي وإعداده! تثبيت وضبط الـ PHP قم بتشغيل حزمة تثبيت PHP التي نُزِّلتها ثم انقرْ فوق "التالي"، واقبلْ الشروط وانقر فوق "التالي" مرة أخرى. انقرْ فوق استعراض، في الشاشة التالية، وانتقل إلى برنامج التثبيت لتثبيت PHP إلى "C:\dev\progs\PHP\‎" وانقر فوق "التالي". حدِّد Apache 2.2.x Module وانقرْ فوق التالي مرة أخرى. يجب أن تخبر برنامج التثبيت بمكان ملف ضبط Apache (الذي قمنا بتحريره حينَ إعداد apache). إذا سارت الأمور بشكل جيد، فسترى الأسطر الجديدة التالية في نهاية ملف ضبط الأباتشي httpd.conf: #BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL PHPIniDir "C:/dev/progs/PHP/" LoadModule php5_module "C:/dev/progs/PHP/php5apache2_2.dll" #END PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL لنضبط ملف تكوين PHP المسمّى php.ini الموجود في المجلد "C:\dev\progs\PHP\‎" وافتحه في Notepad أو PSPad أو Dreamweaver وغيِّر الأسطر على النحو التالي (يجب على PHP تعمل أيضًا مع php.ini الأصلي، ولكن يوصى باستخدام هذه التغييرات لاستخدام أكثر راحة): انتقل إلى السطر 458 أو ابحث عن "memory_limit = 128M" وقم بتغييره إلى "memory_limit = 512M" (حدد مقدار الذاكرة التي يمكن لـ PHP استخدامها). انتقل إلى السطر 531 أو ابحث عن "display_errors = Off" وقم بتغييره إلى "display_errors = On" (إذا كانت هناك بعض الأخطاء، فسيتم عرضها في متصفح الويب، إذا فعِّلتْ هذه الإعدادات). انتقل إلى السطر 542 أو ابحث عن "display_startup_errors = Off" وقم بتغييره إلى "display_startup_errors = On". انتقل إلى السطر 728 أو ابحث عن **"post_max_size = 8M"** وقم بتغييره إلى **" post_max_size = 100M"**. انتقل إلى السطر 879 أو ابحث عن "upload_max_filesize = 2M" وقم بتغييره إلى "upload_max_filesize = 2000M". انتقل إلى السطر 959 أو ابحث عن "‎;date.timezone =‎" واستبدل به "date.timezone = "XXX/XXX"‎". حيث يعني XXX/XXX موقعك الفعليّ، بالنسبة لي سوريا/حلب، للعثور على وضعك هنا. بالنسبة للأشخاص الذين يعيشون في سوريا - حلب، يجب أن يبدو التنسيق مثل هذا "date.timezone = "Asia/Aleppo"‎". هذا هو كل ما يجب فعله. احفظْ الملفَّ، ثم أخرج من المحرِّرْ، وأعد تشغيل Apache. لنختبر ما إذا كان PHP يعمل. لذا انتقل إلى المجلد "C:\dev\www\‎" وأنشئ ملفًا نصيًّا جديدًا يسمَّى "index.php" واكتب بداخله النص التالي: "<?php phpinfo()‎; ?>" احفظ الملف واخرجْ. افتح متصفح الويب وانتقل إلى المضيف المحلي "localhost". إذا تمَّ تثبيت PHP بنجاح، فسترى هذه الصورة: تثبيت وضبط MySQL هذا هو الجزء الأسهل، لضبط كلِّ شيء في معالج التثبيت. قمْ بتشغيل ملف التثبيت MySQL. انقر فوق التالي، واختر مخصص، ثمَّ انقر فوق التالي، وقم بتغيير مجلد التثبيت إلى "C:\dev\progs\MySQL\‎" ثمَّ انقر فوق "التالي" مرةً أخرى، ثمَّ قُمْ بالتثبيت. بعد اكتمال التثبيت، سترى نافذةً أخرى، لذلك انقر مرة أخرى، التالي، التالي، تحقق من وضع إشارة على "Configure the MySQL server now" وألغِ تحديد "Register the MySQL server now"، ثم انقرْ فوق "إنهاء". في الشاشة التالية، انقر فوق "التالي"، ثم حدد الضبط التفصيلي "Detailed Configuration" ثمَّ انقر فوق "التالي"، وحدد "Developer Machine" وانقر فوق "التالي"، "Multifunctional Database" وانقر فوق "التالي"، واترك النافذة الأخرى كما هي وانقر فوق "التالي"، وحدد الخيار "Decision Support (DSS)/OLAP" وانقر فوق" التالي". تحقق الآن من "Enable TCP/IP Networking"، واتركْ رقم المنفذ 3306، وحدد "Add firewall exception for this port"، وحدد "Enable Strict Mode"، ثم انقر فوق التالي. حدد "Best Choice For Multilingualism" وانقر فوق "التالي". حدِّدْ "Install As Windows Service"، وحدد اسم الخدمة "MySQL5"، حدد "Launch the MySQL Server automatically" وتحقَّقْ من وضع علامة على "Include Bin Directory in Windows PATH" ثم انقر فوق "التالي". حدد "Modify Security Settings" وباعتبارها "New root password"، استخدم "root" بدون علامات الاقتباس، وأكِّدْ كلمة المرور، واترك باقي الخيارات كما هي ثم انقر فوق "التالي". الخطوة الأخيرة هي تطبيق جميع الإعدادات التي قمنا بها، لذلك انقر على "تنفيذ" وانتظر حتى ترى هذا: إذا كنت لا ترى هذه الصورة، فهناك شيء خاطئ. ويجب أن يكون أشياء كثيرة. سأحاول المساعدة في التعليقات. ولكن أتوقع أنه لن يكون هناك أية مشاكل. تثبيت phpMyAdmin وضبطه phpMyAdmin هو مدير قاعدة بيانات MySQL على شبكة الإنترنت. بالنسبة لي شخصيا، إنه الحلُّ الأفضل والأسهل لإدارة وإنشاء قواعد البيانات حتى لو كان يعمل على المضيف المحلي localhost. هناك حلٌّ من مطوِّري MySQL يُسمِّى MySQL GUI Tools، يعمل على أنظمة تشغيل Windows، لكنَّه لا يوفِّرُ الاستطلاع الأسهل وهو فوضوي بعض الشيء بالنسبة لي. يعرفُ العديد من المستخدمين الذين يستخدمون خدمات استضافة الويب لصفحات الويب، phpMyAdmin جيّدًا. أثبت غالبًا WordPress و Drupal و Joomla و vBulletin معًا لاختبار السمات وما إلى ذلك، وأستخدم قاعدة بيانات واحدة لكل نظام إدارة محتوى CMS، ولهذا السبب أستخدم phpMyAdmin، والذي يسمح لي بإنشاء قواعد بيانات بطريقة سهلة دون معرفة العمل على سطر أوامر MySQL. سنبدأ بإنشاء مجلد يسمى "pma" في "C:\dev\www\‎". افتح الآن ملف zip باستخدام phpMyAdmin واستخلص كل محتوى المجلد "phpMyAdmin-3.3.2-all-languages" إلى مجلد "pma". افتح الآن متصفح الويب المفضَّل لديك وأشرْ إلى المسار "localhost/pma". إذا كنت محظوظًا، يجب أن تشاهد شاشة تسجيل دخول phpMyAdmin. يمكنك تسجيل الدخول إلى phpMyAdmin عن طريق إدخال "root" لاسم المستخدم وكلمة المرور على السواء. على نظامي التشغيل Vista و Windows 7، وربما على أنظمة تشغيل XP أيضًا، ستظهر لك في بعض الأحيان بعض الأخطاء تشير بأنَّ PHP غير مثبَّت أو مُجهَّز بشكلٍ صحيح. هذا أحد الأخطاء غير المتوقعة التي كنت أبحث عنها في كثير من الأحيان لعدة ساعات، قبل أن أحلّها! قد يكون الحل بسيطًا - أولاً ، انتقل إلى المجلد "C:\dev\progs\PHP\‎" وابحث عن ملف يسمى "php5ts.dll" وانسخه إلى المجلدين التاليين: "C:\Windows\‎" و "C:\Windows\System32\‎" وأعدْ تشغيل Apache. ربَّما سيرفض Apache البدء وسيظهر أخطاء، إذا كان الأمر كذلك، تجاهل الخطأ وابدأ من جديد. يجب أن تعمل الآن! يجب أن تشاهد صفحة تسجيل دخول phpMyAdmin عن طريق توجيه المتصفح إلى "localhost/pma". إذا لم يساعد الحل الأول، فستكون المشكلة متعلقة بأذونات الكتابة لمجلد Windows وجلسة PHP، التي تقوم بحفظ المسار إلى مجلدات Temp. ليس لدى PHP إذن الكتابة إلى مجلدات Temp المطلوبة. هذه المشكلة فردية حقًا، وإذا قام شخص ما بالإبلاغ عنها في التعليقات، فسوف أساعده بشكل منفرد. قُمْ بتسجيل الدخول إلى phpMyAdmin وستحصل على واجهة إدارة قاعدة بيانات phpMyAdmin. في اللوحة اليسرى، سترى قواعد البيانات الفعلية، والتي تُعَدُّ مهمة لتشغيل MySQL بشكل صحيح، لذلك لا تحذفها. على الجانب الأيمن سترى بعض المعلومات حول خادم الويب الخاص بك، يمكنك تغيير السمة أو اللغة أو إنشاء قاعدة بيانات جديدة. في الجزء السفلي سترى بعض الأخطاء، والتي سنصلحها. للاستخدام الأساسي ليس ضروريًا، لكن لا يمكنني تحمّل أي شيء يُظْهِرُ أخطاءً :-) أولاً، يجب علينا إنشاء بعض الجداول لإلغاء تأمين الإمكانات الكاملة لـ phpMyAdmin، لذلك في اللوحة اليسرى، انقر فوق قاعدة البيانات المسماة اختبار "test"، ثم انقرْ فوق استيراد "import". انقر فوق الزر Browse وانتقل من خلال phpMyAdmin إلى المجلد "C:\dev\www\pma\scripts\‎" واختر ملفًا يسمَّى "create_tables.sql" وفي phpMyAdmin في الركن السفلي الأيمن انقر على "Go". سيقوم بإنشاء قاعدة بيانات جديدة تسمى phpmyadmin مع 9 جداول. سيتمُّ استخدامه لميزات phpMyAdmin المتقدِّمَة، مثل إنشاء ملفات PDF وما إلى ذلك. يمكنك إغلاق المتصفح و التطلّع إلى الجزء الأخير - تحرير ملف ضبط phpMyAdmin :-). انتقل إلى المجلد "C:\dev\www\pma\‎" وافتح الملف "config.sample.inc.php" في Notepad أو Dreamweaver أو PSPad. نحتاج إلى تعديل السطر 18 الذي يحدد عبارة المرور السرية لـ blowfish. الأمر متروك لك تمامًا فيما تقوم بإدخاله بين علامات الاقتباس حتى تتمكن من البحث عن مثال كهذا: "‎$cfg['blowfish_secret'] = '1M41Oie6q9E3w#7U0M^3f3Tyzr5r93 ';‎" انتقل إلى السطر 36 واستبدل "‎$cfg['Servers'][$i]['extension'] = 'mysql';‎" بـ "‎$cfg['Servers'][$i]['extension'] = 'mysqli';‎" نحتاج الآن إلى حذف "//" في بداية الأسطر التالية: (also change default pma user to root) $cfg['Servers'][$i]['controlpass'] = 'root';<strong> (also change default pmapass password to root)</strong> $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin'; $cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark'; $cfg['Servers'][$i]['relation'] = 'pma_relation'; $cfg['Servers'][$i]['table_info'] = 'pma_table_info'; $cfg['Servers'][$i]['table_coords'] = 'pma_table_coords'; $cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages'; $cfg['Servers'][$i]['column_info'] = 'pma_column_info'; $cfg['Servers'][$i]['history'] = 'pma_history'; $cfg['Servers'][$i]['tracking'] = 'pma_tracking'; $cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords'; احفظ الملف في نفس المجلد كـ "config.inc.php" ثم اخرج من المُحرِّر. يجب أن يعمل phpMyAdmin الآن دون أية أخطاء، وقد انتهينا من التثبيت الكامل لخادم الويب المضيف المحلي. يمكنك الآن استعادة إعدادات UAC كما كنا تحدثنا عنها في البداية. اختياري - تثبيت أحد أنظمة إدارة المحتوى (ووردبريس) يجب أولًا إنشاء قاعدة بيانات جديدة لبرنامج WordPress، لذلك قمْ بتسجيل الدخول إلى phpMyAdmin وتحت النص إنشاء قاعدة بيانات جديدة "Create New Database"، اكتب اسم "WordPress" وانقر فوق "إنشاء". انتقل الآن إلى المجلد "C:\dev\www\‎" وقم بإنشاء مجلد جديد يسمى "wp". إذا قُمْتَ بتنزيل ملف التثبيت WordPress 2.9.2، فافتح الملف المضغوط واستخرج كل محتويات مجلد WordPress إلى "C:\dev\www\wp\‎" افتح المتصفح وانتقل إلى "localhost/wp"، إذا كان كل شيء جيدًا ، يجب أن تشاهد أولاً صفحة تثبيت WordPress، لذلك انقر على "إنشاء ملف ضبط" (Create a Configuration File) ثم على " هيا نذهب!" (Lets go!‎) في الصفحة التالية. في الصفحة التالية، قم بملء اسم قاعدة البيانات، وهو "WordPress" واسم المستخدم وكلمة المرور "root" لكليهما. هذه هي كلمة المرور الخاصة بـ WordPress لكتابة الجداول في قاعدة البيانات وليس للوصول إلى لوحة إدارة نظام إدارة المحتوى CMS. يمكن أن تظل جميع القيم الأخرى كما هي، انقر فوق "إرسال" (submit) ثم "تشغيل التثبيت" (Run the Install). املأ عنوان المدونة، كما يحلو لك. وفي حقل البريد الإلكتروني، أدخل أي عنوان بريد إلكتروني حقيقي. لن يعمل إرسال رسائل البريد الإلكتروني لأن Apache الخاص بنا غير مكوّن لإرسال رسائل البريد الإلكتروني، ولكن من يهتم؟ نحن لسنا في حاجة إليها على مضيف محلي! ;-) ثم تابع التثبيت. في الشاشة التالية، سترى معلومات تسجيل الدخول وكلمة المرور الخاصة بك، اكتبها في مكان ما، وانقر على "تسجيل الدخول" "Log In" للوصول إلى واجهة مسؤول WordPress. هنا يمكنك تغيير كلمة المرور إلى شيء أسهل يمكن تذكره. انتهيت. إذا وجهت متصفحك الآن إلى "localhost/wp" فسترى شيئًا كهذا: تعرَّفتَ على أساسيات تثبيت أي نظام إدارة محتوى. تثبيتات دروبال أو جملة متشابهة جدا. الخلاصة قلت لك إنه ليس معقدًا ;-) إذا كنت مثلي، فأنت تحب القهوة الجيدة في المقهى المفضل لديك (والذي للأسف ليس متصلًا بالإنترنت). وإذا كنت ترغب في العمل بصحبة أشخاص وليس وحدك في المنزل أو في مكتب، فمن المحتمل أنَّكَ ستقدِّر هذا الدليل التعليمي. غالبًا ما يستخدم معظمكم حلولًا مثل WAMP أو XAMPP، والبعض الآخر يستخدم الحل الخاص بي بطريقة أكثر تقدّمًا، والتي توفرها تكوينات Apache، لكنني أعرف الكثير من مصممي الويب ومطوري الويب الذين لا يعرفون هذه الحلول وهذا الدليل التعليمي موجه لهم بالضبط. إذا كنت تواجه أي مشكلة، فأعلمني وسأبذل قصارى جهدي لمساعدتك. ترجمة -وبتصرّف- للمقال Step by Step Guide to Setting Up Your Local Web Server لصاحبها "فريق تحرير الموقع"
×
×
  • أضف...