لوحة المتصدرين

إذا كنت جديدًا في العمل المستقل، فإن التعامل مع فواتير العملاء سيكون من الأمور المرعبة (والمُمِلّة) التي سوف تتعرض لها. تجعل الفواتيرُ عملَك يبدو احترافيًّا، لكن من الصعب تخمين محتوًى جيدٍ لها، أو معرفة الطريقة المناسبة لإرسالها للعميل. من حسن الحظ، فإن لديك العشرات من أدوات الفواتير الممتازة- والتي تقوم بالعمل الصعب نيابةً عنك- ويمكنك الاختيار من بينها. ما عليك فقط إلا أن تُدخل بعض بيانات العميل، ثم تحلل البيانات المطلوبة في كل فاتورة، وسيقوم التطبيق بإنجاز كل شيء نيابةً عنك، وهذا يشمل إرسال التذكيرات، وتتبع الأرباح، وغيرها الكثير. في هذه المقالة سوف تتعلم كيف يمكن لتطبيقات الفواتير أن تحسن من سير حياتك كمستقل. ثم سأقدم لك أفضل التطبيقات للفواتير الخاصة بالكُتّاب المستقلين. هيا لنبدأ! لماذا عليك استخدام تطبيق فواتير الفواتير التي تبدو احترافية في شكلها وصيغتها تعطي انطباعًا لعملائك أنك جادٌّ في عملك. وبالنسبة لك كمستقل، فالفواتير مهمة مستمرة وضرورية طوال حياتك المهنية. ففي كل مرة تنتهي من مرحلة معينة من مراحل مشروع ما، أو تنتهي من مشروع كامل، فسوف ترسل لعميلك فاتورة. هذا يضمن أن لدى كلٍّ منكما مستندًا يوضح سير العمليات المالية ذهابًا وإيابًا. يعتبر إنشاء ومتابعة الفواتير أمرًا مُمِلًّا بصراحة، لأنها تتطلب منك أن تكون دقيقًا في وصف العمل وتوثيقه. وكلما زاد عدد العملاء، كلما زادت الفواتير، لهذا أنصحك أن تستخدم تطبيقًا للفواتير ليهتم بمعظم أعمالك. في هذه الأيام، تقوم تطبيقات الفواتير بعمل أكثر من مجرد أنها تجعل شكل الإيصالات المالية منسقًا وجميلًا. تتيح لك معظم التطبيقات أن تُرسل تذكيرات للعملاء، وإضافة الرسوم المتأخرة، وتتبع أرباحك، والكثير. بمعنى آخر، هذه التطبيقات توفر على المستقلين الكثير من الوقت والجهد. وأفضل بديل لهذه التطبيقات هو أن تقوم بتوظيف محاسب، لكن هذا الخَيَار مكلف جدًّا. أفضل 3 تطبيقات للفواتير تخص الكُتّاب المستقلين التطبيقات التالية ليست للمستقلين فحسب، بل يمكن لكل من يدير عملًا حرًا أن يستفيد منها. تجدر الإشارة إلى أن أفضل الخدمات تكون مدفوعةً، لذا من الممكن أن تكون هناك تكلفةٌ شهرية بسيطة، غير أن هذا هو الوقت الذي سوف تزيد فيه أرباحك مع زيادة العملاء، ولا تجعل هذه التكلفة الشهرية البسيطة تُثنيك عن الحل الصحيح. 1. تطبيق Freshbooks Freshbooks هو واحد من ألمع الأسماء في تطبيقات الفواتير. فقد صار شعبيًّا بفضل مجموعة واسعة من المميزات، وواجهة المستخدم الممتازة، ولا يُخيّب من يستخدمه. قبل هذا التطبيق، كنت أستخدم فقط فواتير PayPal. والانتقال لهذا التطبيق كان بمثابة تجديدٍ للهواء بالنسبة لي. فيه الكثير من المميزات، ولا زلت أكتشف الجديد فيه بمرور الوقت، على سبيل المثال، يُتيح لك التطبيق أن تفرض رسومًا على العملاء باستخدام بطاقةِ الائتمان، وإرسالَ تذكيراتٍ للفواتير المتأخرة، وترجُمَتِهِم، والعديد من المميزات الأخرى. وأنت كمستقلٍ، سوف تُقَدِّرُ فكرة أن تكون قادرًا على فرض رسوم للدفع المسبق، بدلًا من إنشاء فاتورة مستقلة لكل مرحلة من مراحل المشروع. من ينبغي عليه استخدام تطبيق Freshbooks عادةً ما أكون حذرًا من توصية حلٍّ واحد لكل الأفراد، لكن يمكنني استثناء Freshbooks من ذلك. فلديه ما يكفي من المميزات التي يمكنك تصورها لإدارة عمل تقليديّ، وهو رائع جدًّا بالنسبة للمستقلين. مشكلته الوحيدة هي أنه لا يقبل الدفع عن طريق PayPal، وإذا كان عملائك يُصرون على الدفع عن طريق PayPal، فإن عليك التوجه إلى حلٍّ آخر. السعر خطة Freshbook الأولية (starter plan) سوف تُكلِّفُك 15$ في الشهر، وتدعم التعامل مع 5 عملاء في نفس الوقت. وإذا اتسعت قاعدة عملائك فيمكنك أن تُرقّي نظامك إلى الخطة الإضافية (Plus Plan)، التي سوف تكلفك 10$ إضافية فقط، وتدعم التعامل حتى 50 عميلًا. 2. تطبيق Wave يمتلك Wave مميزات منافسة لتطبيق Freshbooks، فهو يمنحك القدرة على إنشاء فاتورة احترافية الشكل باستخدام القوالب، مع إمكانية تَكيِيفِ هذه القوالب مع شعارِك في دقائق. علاوة على ذلك يمكنك أن تباشر الدفع عن طريق البنك وبطاقات الائتمان، والبقاء في أول قائمة الفواتير غير المدفوعة، والكثير من المميزات الأخرى. والأمر الذي يُميز تطبيق Wave حقًّا، هي التكاليف الخاصة بفريق العمل، فإذا كنت تبحث عن تنمية عملك المستقل وتكوين فريق عمل، فبإمكان تطبيق Wave أن يساعدك على إدارة الرواتب، بالإضافة إلى أنه مجانيّ، فلا يلزمك أن تُوَسِّعَ ميزانيتِك المالية لاستيعاب نفقات جديدة. من ينبغي عليه استخدام تطبيق Wave إن خبرتي في استخدام تطبيق Wave محدودة، لكنها متينة. فقد قدَّمت بعض الفواتير، وفي كل مرة حصلت على الدفع دون وجود عقبات. أنه من أفضل التطبيقات في الأنحاء فيما يخص ميزةَ دفع الرواتب، مما يجعله مناسبًا لك إن كنت تحب العمل ضمن فريق، أو توظيف مصادر خارجية. السعر: يُعدُّ تطبيقَ Wave خدمةً مجانيةً، فهو مثل PayPal في أنه يفرض رسومًا قدرها 2.9% على تحويلات بطاقات الائتمان، إضافة إلى 0.03% رسومَ خدمة. هذا التطبيق يدعم الدفع عن طريق البنك أيضًا، برسوم قدرها 1%. 3. PayPal Invoices إذا كنت كاتبًا مستقلًا، فأنت بالتأكيد قد استخدمت PayPal في إحدى مراحل مسيرتك المهنية. أغلب العملاء الذين أتعامل معهم يستخدمونه كطريقةٍ من طرق الدفع، إذ يمكنك به أن تشتري- تقريبًا- أي شيء على الإنترنت. من المهم ملاحظة أن PayPal ليس تطبيقًا للفواتير في حد ذاته، بل هو خدمة لتحويل الأموال، مع بعض مميزات الفواتير المتواضعة المدمجة بداخله. فمميزات الفواتير الخاصة به ليست قريبة أبدًا من المستوى الجيد الذي يتمتع به كلا من Freshbook وWave. ورغم ذلك، فهذه المنصة لا تزال تستحق أن توضع في القائمة، لأنها شعبية جدًا. بالإضافة إلى ذلك، فإذا كان لديك بالفعل حساب على PayPal، فأنت لن تحتاج إلى التسجيل في أية خدمات جديدة. من ينبغي عليه استخدام PayPal. العديد من المستقلين لا يحبون الاعتماد على PayPal كليًّا فيما يخص أجورهم ورواتبهم. لذلك، يمكنك أن تستقبل راتبك عبر PayPal من العملاء الذين يفضلون استخدامه، والتعامل مع باقي العملاء باستخدام تطبيق مختلف. باختصار، لا تقُم بالحد من إمكانية دخلك ورواتبك. تعوّد على PayPal، وتعلم كيف ترسل الفواتير من خلاله، حتى تتسع قاعدة عملائك. السعر: يمكن لأيٍّ كانَ أن يُنشأ حسابًا مجانيًّا على PayPal، لكنهم يفرضون رسومًا على كل دفع تحصل عليه. هذا يختلف من شخص لآخر، اعتمادًا على بلدك، ومصدر المال، ويمكن للأمر أن يكون مكلفًا وحادًّا في بعض الأحيان. ختامًا تطبيقات الفواتير الحديثة تقوم بتسهيل وتبسيط عمل حياتك، فكلما وفرتَ وقتَك، وأرحتَ نفسك من مطارة العملاء لأجل دفع الفواتير، كلما كَرَّست نفسك للعمل، وأقدمت على أعمال جديدة. إذا كان عملك لا يزال وليدًا، فأنت تحتاج إلى بعض العملاء قبل أن تبدأ في القلق بشأن الفواتير. إحدى المنصات التي يمكنك أن تجد عليها عملاء بالنسبة لك ككاتب مستقل- هو موقع خمسات ومستقل، لذا أنصحك أن تستكشفه. مجرد ما إن تحصل على بعض العمل لحسابك الخاص، حينها عليك أن تختار تطبيقًا للفواتير ليهتم بأمرهم. إليك أفضل ثلاثة تطبيقات بالنسبة لي: تطبيق Freshbooks : تطبيقُ فواتيرٍ رائعٌ، يحتوي على كل المميزات لأي عمل. تطبيق Wave : إذا كنت تعمل مع مستقلين آخرين، فهذه أفضل خدمة لك. PayPal Invoices : يتيح لك موقع PayPal أن ترسل الفواتير، بالإضافة إلى كونه خدمةَ الدفعِ الإلكترونية الأكثر شعبية. برأيك ما هو أفضل تطبيق للفواتير بالنسبة للكُتّاب المستقلين؟ أخبرنا عن سبب ذلك في التعليقات في الأسفل! ترجمة- وبتصرف- للمقال 3 Best Invoicing Apps for Freelance Writers لصاحبه ALEXANDER CORDOVA حقوق الصورة البارزة محفوظة لـ Freepik

"بالتأكيد، يمكنني إنهاء ذلك المقال في ساعتين.”. إنني أعلم أن المقال الجيد يحتاج إلى أكثر من ذلك في الغالب، أنا أعلم هذا، ومديري يعلم هذا، لكننا وافقنا على تلك المهزلة رغم ذلك، وفي خلال ساعتين كنت قد جمعت بعض الكلمات ورميتها داخل مستند مع بعض الصور وأرسلتها إليه قائلًة: “ها هو المقال، أهو مناسب؟ أنا جاهزة للتعديلات إن وجدت.”. ثم جلست أنتظر رده الحتمي بفارغ صبر : “وهل تلك كلمات أصلًا؟ أعيدي كتابته.”. إن مثل هذه المواقف تشكل نقاطًا فارقة في حياتي، مواقف فظيعة ومؤلمة بدون داعي ﻷني كنت أمنح وعودًا فوق طاقتي. لكن من ناحية أخرى، من يريد أن يعِدَ بالقليل؟ فهذا يبدو سيئًا، أﻻ يجب أن نعدَ بأكثر من اللازم ثم نفعل ما بوسعنا؟ أليس الجهد هو الفيصل؟ كلا! ربما يرجع تاريخ استخدام البشر للوعود إلى آﻻف السنين، حيث مثّلت تقليدًا اجتماعيًا معقدًا، وتتفاقم عواقب خرق تلك الوعود التي عجز أصحابها عن الوفاء بها، وإليك في هذا المقال الأسباب التي أنصحك من أجلها أن تعِدَ بأقل مما ستسلّمه حقًا: لماذا نقطع وعودًا على أنفسنا؟ مثّلت الوعود ضمانة على أن شيئًا ما سيتم تنفيذه، فقد كانت الوسيلة الأبرز قبل المحاكم والقوانين والأنظمة الاجتماعية المعقدة، وﻻ زالت إحدى أهم الأدوات التي تساعدنا على التواصل مع غيرنا، وهذه هي الأسباب الأربعة التي نقطع وعودًا من أجلها: خلْق الالتزام. تنظيم وإرشاد السلوك. تقليل الحيرة. بناء الثقة. ويحفظ الناس وعودهم ﻷنها تساعدهم على بناء الأساسات اللازمة لحفظ علاقاتهم البشرية وتطويرها، فكلما كبر الوعد زادت ضرورة الالتزام بتنفيذه، فإن الوعود الكبيرة يتبعها توقعات كبيرة، وفي حالة الفشل في تحقيق تلك التوقعات فإن العقل يستجيب بتقليل إفراز الدوبامين، على عكس الحالة التي نحقق فيها تلك التوقعات أو نزيد عليها، إذ يزيد الدماغ من إفراز الدوبامين الذي يجعلنا نشعر بالسعادة، نحن ومن قطعنا له الوعد. إضافة إلى أن الوعود تخبر العالم من حولنا بمدى أهليتنا للثقة: في حالة حفظ الوعد: في حالة خرق الوعد: يحتاج عقلك إلى بعض الثبات، لذا نحن نصدّق من يخبرنا أنه سيفعل كذا وكذا ﻷن هذا يريح العقل البشري، لكن هذا الثبات يبدأ بالتلاشي إن لم يتم الوفاء بذلك الوعد، ﻷن ذلك ليس خرقًا للثقة والتوقعات فقط، بل هو انتهاك لأحد التقاليد الأساسية لدى البشر، ويتعدى أثر عدم الوفاء بذلك الوعدِ خيبةَ اﻷمل ليغيّر طريقة استقبال الناس لنا وتفاعلهم معنا. وعد الحر ديْن عليه وجدت دراسة أجرتها الباحثة الهولندية مانيلا فيث أن الوعود التي لا يوفَ بها تجعلنا نرغب في معاقبة أولئك الذين لم يفوا بها، بل والانتقام منهم أيضًا، وتؤثر تلك المشاعر على أي تفاعل مستقبلي بين الطرفين. تحليل لوعد لم يوفَ به إن عقلك يعرف أنك ستخرق الوعد الذي قطعته من قبل أن تنوي الاعتراف بذلك لنفسك، فقد اكتشف باحثون في سويسرا أن بإمكانهم توقع من سيخرق وعدًا قد قطعه بناءً على تفاعل الدماغ أثناء نموذج من ثلاث مراحل لوضع وعد بتنفيذ شيء ما. مرحلة الوعد لنقل أنك أخبرت زملاءك في العمل أنك ستساعدهم على إنهاء مشروع ما، فأنت لم تقرر قطعًا في هذه المرحلة ما إن كنت ستفي بهذا الوعد أم ﻻ، لكن عقلك سيدرك تناقضًا في نفسك لأنه يعرف أنك ﻻ تنوي الوفاء، وعليه فإنه ينشّط مراكز معالجة المشاعر السلبية. مرحلة الترقّب ستنتظر الآن رد فعل زملائك الذين أخبرتهم أنك ستساعدهم، لترى ما إن كانوا سيثقون بك أم لا، لكن ذلك الترقّب يرفع معدل اﻹجهاد عليك، وهو ما يلتقطه دماغك طبعًا إذ كان يجهزك للعواقب السلبية المحتملة لهذا الوعد. مرحلة اتخاذ القرار لقد قررت أن تخرق وعدك لزملائك بسبب انشغالك الزائد، لكن ذلك القرار سيعزز رد فعل في دماغك يشبه ذلك الذي يحدث عند الكذب أو الخداع، فتشعر ببعض الذنب والخوف من تأثير خرقك لهذا الوعد. وسيكافح دماغك هذا الشعور بتذكيرك بالسبب الذي جعلك تخرق وعدك من الأساس عبر تنشيط الجزء المسؤول عن صناعة القرار المرتبط بالمكافأة في دماغك. ثلاث طرق تساعدك على الوفاء بوعودك 1. سل نفس إن كان يجب أن تعطي وعدًا يجب أن يكون وعدك نابعًا من رغبة حقيقية في تنفيذ ما تريد أن تعِد به، فانظر ما تريد أن تحققه بإعطائك لهذا الوعد وما إن كان يمكن إعطاء وعد أقل منه. **فمثلًا: **لنقل أن اليوم هو الأربعاء، ولم تنه حتى نصف مشروعك، لكنك تعد بأنه سيكون منتهيًا بنهاية الأسبوع لأنك تريد أن تبهر زملاءك في العمل، لكنك نسيت المهام الأخرى التي يجب أن تنهيها. فقم بتقسيم المشروع إلى أجزاء صغيرة، وبدلًا من إعطاء وعد بأنك ستنهي المشروع في وقت غير منطقي، قل أن اﻷجزاء الفلانية من المشروع ستنتهي بتاريخ كذا، فإن ذلك يسمح لك بالتحكم في توقعات من حولك، ومتابعة إنجازك لما عليك من مهام، وستحافظ على إعجاب زملائك بك وعلى حفظك لوعدك. 2. عِد بأقل مما ستفعله قدّر الوقت الذي سيحتاجه المشروع ثم زد على ذلك ضعفه أو ثلاثة أمثاله -وفق حدود معقولة-، ولا تعط إجابة إن سئلت عن المدة اللازمة للمشروع إن لم تكن تعرف بالتحديد، وأخبرهم بدلًا من ذلك أنك سترد عليهم لاحقًا. مثال: إن كان المقال يستغرق مني ثلاثة أيام لكتابته، فسأقول أربعًا كي أحظى بوقت إضافي لربما استغرق بعض المقال أطول من المتوقع، أما إن أنجزته في أقل من أربعة أيام فإن ذلك سيجعل العميل سعيدًا. 3. في حالة الأسوأ قد نضطر أحيانًا إلى خرق وعودنا، فكن صريحًا وقدّم اعتذارًا فوريًا، فذلك يساعدك على حفظ علاقتك على المدى الطويل. فمثلًا: لنقل أني وعدت أن أنهي خمسة مقالات بنهاية الأسبوع، لكني لم أكتب إﻻ أربعة، إليك ما سأقول لمديري مباشرة: “قد استغرقت المقالات أطول مما توقعت لها، لذا سأنهي أربعًا فقط بنهاية الأسبوع، وسأختار موضوعات ليس فيها هذا التوسع في المرة القادمة.”. أرأيت؟ لقد وضحت السبب -وليس العذر- إضافة إلى الحل لتجنب حدوث هذا الموقف في المستقبل. وقد جعلتني الوعود المبالغ فيها أشعر أني في لعبة مطاردة، فأنجز نصف المشروع أحيانًا لمجرد أن أقول "أرأيت، إنه شبه تام …”، أما حين أعِد بأقل مما سأفعله فإني أبهر من حولي ونفسي أيضًا، فهذا يعطيني مساحة لإخراج أفضل ما بداخلي ويشعرني بالسعادة والفخر. واﻷمر في حقيقته يدور حول إعطاء نفسك زخمًا في كل مرة تنجح في تنفيذ وعد ما، إذ ستشعر أنك أكثر ثقة في نفسك وفي قدراتك، وسيرتبط اسمك بالثقة والإيجابية، وستتمكن من بناء أي علاقة تريدها في حياتك وتحافظ عليها أيضًا. ترجمة -بتصرف- لمقال Why you should always under-promise and over-deliver لصاحبته أندريا أيْريس

تلعب روابط URL دورا هامًّا في العثور على مواقع الويب؛ لذا من المهم تحسينها لمحركات البحث Search Engine Optimization. سنرى في هذا الدرس طريقةً لجعل روابط مشروع larashop محسّنة للمحركات. رأينا في الدرس السابق كيف تعمل المسارات والمتحكمات، سنبني على هذه المعرفة التي اكتسبناها من أجل الوصول إلى الهدف المحدّد. هذا الدرس جزء من سلسلة تعلم Laravel والتي تنتهج مبدأ "أفضل وسيلة للتعلم هي الممارسة"، حيث ستكون ممارستنا عبارة عن إنشاء تطبيق ويب للتسوق مع ميزة سلة المشتريات. يتكون فهرس السلسلة من التالي: مدخل إلى Laravel 5.تثبيت Laravel وإعداده على كلّ من Windows وUbuntu.أساسيات بناء تطبيق باستخدام Laravel.إنشاء روابط محسنة لمحركات البحث (SEO) في إطار عمل Laravel. (هذا الدرس)نظام Blade للقوالب.تهجير قواعد البيانات في Laravel.استخدام Eloquent ORM لإدخال البيانات في قاعدة البيانات، تحديثها أو حذفها.إنشاء سلة مشتريات في Laravel.الاستيثاق في Laravel.إنشاء واجهة لبرمجة التطبيقات API في Laravel.إنشاء مدوّنة باستخدام Laravel.استخدام AngularJS واجهةً أمامية Front end لتطبيق Laravel.الدوّال المساعدة المخصّصة في Laravel.استخدام مكتبة Faker في تطبيق Laravel لتوليد بيانات وهمية قصدَ الاختبار. سنغطّي في هذا الدرس موضوعين أساسيّين: العوامل المؤثّرة في التحسين لمحركات البحث.كيفية إنشاء روابط محسّنة لمحركات البحث في Laravel.العوامل المؤثرة في التحسين لمحركات البحثلا نهدف إلى تقديم دليل شامل عن التحسين لمحركات البحث؛ ما نريده هنا هو ذكر بضعة عوامل يجب على المطور أن يكون على اطّلاع عليها. في ما يلي عوامل تؤثر على تقويم محركات البحث مثل Google لصفحات الويب: سرعة الموقع: يحب الجميع أن تظهر صفحة الويب التي يزورها بسرعة، فلا أحد يحب الانتظار إلى ما لا نهاية حتى تظهر الصفحة التي يطلبها. من الأحسن ألا يتعدى زمن تنزيل الصفحة ثانيتين وكل ما قلّ كلّ ما كان الأمر أفضل. يجب عليك بوصفك مطوّرا اختبارُ سرعة تطبيقك وإجراء التحسينات اللازمة إن اقتضت الضرورة.إحصاءات الشبكات الاجتماعية: من الطبيعي، عند قراءتك شيئا مهمّا، مشاركتُه مع متابعيك وأصدقائك على الشبكات الاجتماعية؛ وهذا دليل على الأهمية بالنسبة لمحركات البحث. دورك كمطور هو توفير الأدوات التي تسهل على الزوار مشاركة محتوى الموقع.تصميم تجاوبي Responsive: يمثل مستخدمو الأجهزة المتنقلة جزءًا كبيرًا من مستخدمي خدمات الويب. من هذا المنطلق يجب التأكد من أن موقع الويب يظهر بشكل صحيح على أجهزة الجوّال، الأجهزة اللوحية وأجهزة سطح المكتب؛ إذ أن تجربة المستخدم من العوامل المؤثرة في تقويم محركات البحث.الكلمات المفتاحية Keywords: تصنف محركات البحث مليارات صفحات الويب حسب الكلمات الأساسية الواردة فيها. يتمثل دور المطور في التأكد من توفير آليات مثل الوسوم Tags، أوصاف meta، وعناوين HTML يمكن لكاتب المحتوى استخدامها لتمييز المحتوى المفتاحي.روابط URL الخاصة بالموقع: يجب أن تظهر الكلمات المفتاحية في روابط الموقع.كيفية إنشاء روابط محسنة لمحركات البحث في Laravelعرضنا لأساسيات تحسين محركات البحث مع ذكر دور المطور في تنفيذها. سنبدأ الآن في وضع هذه المبادئ موضع التنفيذ. سننشئ مسارات ونربطها بمت حكم. يُظهر الجدول التالي الروابط التي سيتكون منها متجرنا الإلكتروني. التسلسل الرابط الدالة الوصف1/indexالصفحة الرئيسية2/productsproductsصفحة المنتجات3/products/details/{id}product_details(id)صفحة المنتج ذي المعرّف id4/products/categoryproduct_categoriesعرض تصنيفات المنتجات5/products/brandsproduct_brandsعرض العلامات التجارية للمنتجات6/blogblogعرض فهرس بمنشورات المدونة7/blog/post/{id}blog_post($id)عرض محتوى التدوينة ذات المعرّف id8/contact-uscontact_usعرض صفحة الاتصال9/loginloginصفحة تسجيل الدخول10/logoutlogoutتسجيل خروج المستخدم11/cartcartعرض محتوى سلة المشتريات12/checkoutcheckoutصفحة الدفع13/search/{query}search($query)عرض نتائج البحث في الموقعتعريف مسارات الروابطسنعرّف مسارا لكل من الروابط الموجودة في الجدول أعلاه، لذا نفتح الملف app/Http/routes.php ونعدّل المحتوى بحيث يصبح التالي: <?php /* |-------------------------------------------------------------------------- | Application Routes |-------------------------------------------------------------------------- | | Here is where you can register all of the routes for an application. | It's a breeze. Simply tell Laravel the URIs it should respond to | and give it the controller to call when that URI is requested. | */ Route::get('/','Front@index'); Route::get('/products','Front@products'); Route::get('/products/details/{id}','Front@product_details'); Route::get('/products/category','Front@product_categories'); Route::get('/products/brands','Front@product_brands'); Route::get('/blog','Front@blog'); Route::get('/blog/post/{id}','Front@blog_post'); Route::get('/contact-us','Front@contact_us'); Route::get('/login','Front@login'); Route::get('/logout','Front@logout'); Route::get('/cart','Front@cart'); Route::get('/checkout','Front@checkout'); Route::get('/search/{query}','Front@search');احفظ الملف. يستدعي كلٌّ مسار دالة المتحكم Front الموافقة له، حسب الجدول أعلاه. بقي الآن إنشاء المتحكم وكتابة الدوال. نستخدم أداة Artisan لإنشاء شفرة نمطية لمتحكم Laravel. تأكد من وجودك في مجلد المشروع larashop ثم نفذ الأمر التالي: php artisan make:controller Front يعني ظهور الرسالة التالية أن الأمر نُفذ كما يجب: Controller created successfully.افتح ملف المتحكم Font الذي أنشأناه للتو (app/Http/Controllers/Front.php) وعدّل عليه بحيث يصبح محتواه التالي: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Controllers\Controller; class Front extends Controller { public function index() { return 'index page'; } public function products() { return 'products page'; } public function product_details($id) { return 'product details page'; } public function product_categories() { return 'product categories page'; } public function product_brands() { return 'product brands page'; } public function blog() { return 'blog page'; } public function blog_post($id) { return 'blog post page'; } public function contact_us() { return 'contact us page'; } public function login() { return 'login page'; } public function logout() { return 'logout page'; } public function cart() { return 'cart page'; } public function checkout() { return 'checkout page'; } public function search($query) { return "$query search page"; } }تعرّف الشفرة أعلاه الدوال التي تجيب على كل طلب يأتي من المسارات التي عرّفناها في ملف routes.php. اكتفينا -لحد الساعة- بجعل كل دالة ترجع اسم المسار الذي تجيب على طلباته. انتقل الآن للمتصفح وأدخل الرابط التالي في شريط العناوين: http://larashop.dev/search/bootsستحصل على صفحة بالمحتوى التالي: boots search pageجرب الروابط الأخرى أيضا: http://larashop.dev/ http://larashop.dev/products http://larashop.dev/products/details/7 http://larashop.dev/products/category http://larashop.dev/products/brands http://larashop.dev/blog http://larashop.dev/blog/post/3 http://larashop.dev/contact-us http://larashop.dev/login http://larashop.dev/logout http://larashop.dev/cart http://larashop.dev/checkout http://larashop.dev/search/Keywordترجمة -وبتصرّف- لمقال Laravel 5 SEO Friendly URLs لصاحبه Rodrick Kazembe.

أنشأنا في الدرس السابق مسارات تكتفي بكتابة عبارات في صفحة الويب. سننشئ في هذا الدرس عروضا لتقديمها إلى الزوار حسب الرابط الذي يختارونه؛ نستخدم لهذا الغرض قوالب Blade. هذا الدرس جزء من سلسلة تعلم Laravel والتي تنتهج مبدأ "أفضل وسيلة للتعلم هي الممارسة"، حيث ستكون ممارستنا عبارة عن إنشاء تطبيق ويب للتسوق مع ميزة سلة المشتريات. يتكون فهرس السلسلة من التالي: مدخل إلى Laravel 5.تثبيت Laravel وإعداده على كلّ من Windows وUbuntu.أساسيات بناء تطبيق باستخدام Laravel.إنشاء روابط محسنة لمحركات البحث (SEO) في إطار عمل Laravel.نظام Blade للقوالب. (هذا الدرس)تهجير قواعد البيانات في Laravel.استخدام Eloquent ORM لإدخال البيانات في قاعدة البيانات، تحديثها أو حذفها.إنشاء سلة مشتريات في Laravel.الاستيثاق في Laravel.إنشاء واجهة لبرمجة التطبيقات API في Laravel.إنشاء مدوّنة باستخدام Laravel.استخدام AngularJS واجهةً أمامية Front end لتطبيق Laravel.الدوّال المساعدة المخصّصة في Laravel.استخدام مكتبة Faker في تطبيق Laravel لتوليد بيانات وهمية قصدَ الاختبار. تعرِّف القوالب Templates إطارا عامًّا للعرض، يحدّد أجزاءه والعناصر التي تكوّنه. Blade هو نظام إدارة القوالب والتعامل معها المضمَّن في Laravel. نحصُل بنهاية هذا الدرس على الواجهة التالية. يشمل الدرس المواضيع التالية: توريث القالب.المخطّط الرئيس Master layout.تمديد المخطّط الرئيس.عرض المتغيرات.التعبيرات الشرطية Conditional statements في Blade.الحلقات التكراراية Loops في Blade.تنفيذ تعليمات PHP في Blade,تنتهي جميع ملفات العروض في Blade بالامتداد blade.php. توريث القوالبيمكن تعريف توريث القوالب بأنه تلك الخاصيّة التي تسمح بجمع عناصر مشتركة بين عدة عروض ضمن عرض تعيد استخدامه عند الحاجة مع إضافة العناصر الخاصة بالصفحة؛ مما يجنب تكرار العناصر المشتركة في كلّ مرة. المخطط الرئيستُجمع العناصر المشتركة في عرض يُطلَق عليه المخطّط الرئيس تعيد العروض الأخرى استخدامه وتضيف إليه العناصر الخاصة بها. سننشئ في ما يلي مخطّطا رئيسا نضمنه عناصر مشتركة بين العروض.ننشئ مجلدا جديدا باسم layouts على المسار resources/views/. ثم ننشئ ملفا باسم master.blade.php ضمن المجلد layouts.نضيف الشفرة التالية إلى الملف master.blade.php:<html> <head> <title>@yield('title')</title> </head> <body dir="rtl"> @section('sidebar') هنا يوجد محتوى المقطع sidebar في المخطط الرئيس. @show <div class="container"> @yield('content') </div> </body> </html>قالب Blade عبارة عن وسوم HTML مع تعليمات خاصة بنظام القوالب. يستخدم القالب أعلاه ثلاث تعليمات هي section ،@yield@ و show@. تُستخدم التعليمة section@ لتعريف مقطع (عنصر) من القالب.بينما تستخدم التعليمة yield@ لعرض محتوى مقطع معطى (مقطع باسم title في أول استخدام للتعليمة yield@ في المخطّط السابق).أما التعليمة show@ فتستخدم لعرض محتوى مقطع.تمديد المخطط الرئيسننشئ الآن قالبا يمدّد القالب الرئيس السابق. أنشئ ملفا باسم page.blade.php في المسار resources/views وأضف إليه الشفرة التالية: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <p>جسم الصفحة.</p> @endsectionتشير التعليمة ('extends('layouts.master إلى أننا في صدد تمديد المخطّط الرئيس master.blade.php الموجود ضمن المجلد layouts.تعيّن التعليمة ('section('title', 'Page Title قيمة المقطع title المعرّف في المخطّط الرئيس. ثم نعرّف مقطع جديدا باسم sidebar ضمن العرض page. داخل المقطع sidebar نطبع محتوى المقطع الذي يحمل نفس الاسم في المخطّط الرئيس باستخدام التعليمة parent@، نضيف فقرة HTML باستخدام الوسم <p>...</p> ثم ننهي المقطع sidebar بالتعليمة endsection@.تعرّف التعليمة ('section('content محتوى المقطع content وهو في هذا المثال الفقرة <p>جسم الصفحة.</p>.في المخطط الرئيس توجد ثلاثة مقاطع وهي، حسب ترتيب الاستخدام، sidebar ،title و content. بالنسبة للمقطعين title و content فقد اكتفينا بتحديد أماكنهما (التعليمة yield@)؛ أما المقطع sidebar فقد عرفنا محتواه وعرضناه (التعليمتان section@ و show@). في القالب page أعدنا استخدام المخطّط الرئيس ثم أعطينا قيمتي المقطعين title و content المعرّفين سابقا. بالنسبة للمقطع sidebar فقد أعدنا تعريفه مع إعادة استخدام محتوى المقطع المماثل له في الاسم ضمن القالب الرئيس (تعليمة parent@) وإضافة فقرة نصية أخرى. سنضيف مسارا خاصًّا لتجربة عمل نظام القوالب. افتح ملف المسارات routes.php وأضف المسار التالي: Route::get('blade', function () { return view('page'); });احفظ التعديلات. الآن أدخل الرابط في المتصفح: http://larashop.dev/bladeستحصل على الصفحة التالية: استخدام متغيرات في قوالب bladeنعرّف متغيرا باسم name ونمرره إلى قالب blade. افتح ملف المسارات وغيره بحيث يصبح على النحو التالي: Route::get('blade', function () { return view('page',array('name' => 'حسوب')); });احفظ التعديلات. نحدّث القالب page.blade.php لإظهار المتغير الذي يمرره المسار: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> @endsectionتستخدم التعليمة {{name$}} لطباعة قيمة المتغير name$. احفظ التعديلات ثم أعد تحميل الصفحة http://larashop.dev/blade. ستلاحظ وجود عنوان h2 جديد هو حسوب التي هي قيمة المتغير الممرًّر لقالب page.blade.php. التعبيرات الشرطية في Bladeيدعم نظام Blade التعبيرات الشرطية التي تحدّد ما يُعرض حسب شرط معرَّف مسبقا. سنمرر متغيرا إلى القالب ثم نختبر قيمته (الشرط) وحسب نتيجة الاختبار يكون العرض. افتح ملف routes.php وعدل المسار بحيث يصبح ما يلي: Route::get('blade', function () { return view('page',array('name' => 'حسوب','day' => 'Friday')); });أضفنا هنا متغيرا جديد باسم day وأعطيناه القيمة Friday. احفظ التعديلات. افتح ملف القالب وعدله على النحو التالي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif @endsectionإذا كانت قيمة المتغير day هي Friday نعرض الجملة <p>إنه يوم الجمعة</p> وإلا فإن الفقرة المعروضة تصبح <p>اليوم ليس يوم الجمعة</p>. احفظ التعديلات ثم أعد تنزيل الصفحة ولاحظ الفرق. الحلقات التكرارية في Bladeيدعم Blade كل الحلقات التكرارية التي يدعمها PHP. سنرى مثالا لاستخدام الحلقة التكرارية foreach لعرض محتويات مصفوفة Array في قالب Blade. عدل ملف المسارات routes.php على النحو التالي: Route::get('blade', function () { $foods = array('Barbecue','Couscous','Fish'); return view('page',array('name' => 'حسوب', 'day' => 'Friday', 'foods' => $foods)); });عرّفنا مصفوفة تحوي ثلاثة عناصر ومررناها إلى قالب Blade. احفظ التعديلات ثم افتح ملف القالب وعدّله على النحو التالي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif <h2>حلقة foreach التكرارية</h2> @foreach ($foods as $food) {{$food}} <br> @endforeach @endsectionاحفظ التعديلات ثم أعد تحميل الصفحة ولاحظ طباعة محتوى المصفوفة. تضمين شفرة PHP في قالب Bladeافتح ملف القالب وعدّله بإضافة سطر يستخدم إحدى دوالّ PHP (اخترنا الدالة date). يصبح ملف القالب كما يلي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif <h2>حلقة Loop التكرارية</h2> @foreach ($foods as $food) {{$food}} <br> @endforeach <h2>شفرة PHP</h2> <p>تاريخ اليوم {{date(' D M, Y')}}</p> @endsectionوضعنا دالة PHP داخل معكوفين مزدوجين لتنفيذها. أعد تنزيل الصفحة http://laravel.dev/blade بعد حفظ التعديلات. العروض المكونة لمشروع Larashopذكرنا في بداية السلسلة أننا نهدف إلى إنشاء موقع للتسوق الإلكتروني. سنستخدم ما تعلمناه في هذا الدرس والدروس السابقة لبناء اللبنة الأولى من هذا المشروع وهي الجانب المرئي. لإعطاء وجه لائق لمشروعنا بحثنا عن تصميم HTML جاهز ووجدنا أن قالب Eshopper من موقع shapebootstrap.net مناسب لما نريد. الخطوة التالية للحصول على تصميم HTML هي تحويله إلى قالب Blade يعمل مع Laravel. سنبدأ أولا بمحتوى الملف المرفق وكيفية استخدامه للحصول على واجهة الموقع المعروضة في أول الدرس، ثم نشرح بعد ذلك تعليمات Blade التي لم نتطرق إليها حتى الآن. محتوى الملف المرفقيحوي الملف المرفق: عروض المشروع larashop.ملف المتحكم Front الذي حدثناه ليحمّل عروض المشروع.ملف المسارات.الموارد المستخدمة في القالب: ملفات CSS، الصور، ملفات Js والخطوط.العروضيحوي المشروع العروض التالية: layout: وهو المخطط الرئيس ويوجد في المجلد الفرعي layouts.sidebar: وهو عرض مشترك بين صفحاتٍ عدة، يوجد في مجلد فرعي باسم shared.blog: صفحة المدونة.blog_post: صفحة منشور على المدونة.cart: صفحة سلة المشتريات.checkout: صفحة الدفع.contact_us: صفحة الاتصال.home: الصفحة الرئيسية.login: صفحة تسجيل الدخول.products: صفحة المنتجات.product_details: تفاصيل منتج.يجب أن توضع العروض في المجلد resources/views. تبدو بنية هذا المجلد كالتالي بعد إضافة العروض إليها. المتحكم Front وملف المساراتأنشأنا في الدرس السابق متحكم Front لكنه يكتفي بعرض نص في المتصفح. سنحتاج لتعديله ليحمِّل العروض. عدّلنا قليلا على ملف المسارات routes.php لتعريف مسار لكل تصنيف أو علامة تجارية. مجلد publicيحوي الموارد (صور، css، js) التي تحتاجها واجهة الموقع للعمل. يجب وضع هذه الموارد في مجلد public في المشروع. ملحوظة: تأكد بعد نقل الملفات من المرفق إلى أماكنها في المشروع من أن الأذون ما زالت على الحال التي ضبطناها بها في درس الإعداد (لينكس). الآن وبعد التأكد من نقل الملفات من المرفق إلى أماكنها الصحيحة، اذهب إلى الصفحة الرئيسية http://larashop.dev وستظهر واجهة الموقع. نأخذ وقتا لشرح المشروع. تحويل صفحات HTML إلى قالب Bladeقوالب Blade هي، كما رأينا، وسوم HTML مع تعليمات خاصّة بنظام القوالب؛ لذا نحافظ على البنية العاملة لملفات HTML المكوِّنة للموقع مع إجراء تغييرين أساسيين: جمع العناصر المشتركة بين مختلف الصفحات ضمن صفحة خاصة.إبدال الروابط في صفحة HTML بتعليمات Blade.يُترجَم تحويل صفحات HTML إلى قوالب Blade بالخطوات التالية: إنشاء مخطّط رئيس تُمدده جميع الصفحات. يحوي المخطط الرئيس العناصر المشتركة بين الصفحات.إنشاء صفحة (عرض) لكل مسار من المسارات المعرَّفة في الدرس السابق.تحديث المتحكم Front.php لتحميل العروض.إضافة الموارد (الصور، ملفات css وjs) إلى مجلد public في تطبيق Laravel.يحوي الملف المرفق بهذا المقال عروض Blade الناتجة عن تحويل صفحات HTML إلى قوالب Blade، إضافة إلى ملف المسارات الخاص بمشروع Larahop، المتحكم Front.php والموارد مثل الصور وملفات css (مجلد public). المخطط الرئيسأنشأنا ملفا لمخطط رئيس باسم layout.blade.php على المسار resources/views/layouts. في هذا الملف توجد وسوم HTML مع تعليمات Blade؛ بعضها لم نتطرق له بعد: تعليمة {{url}}:{{url('products')}}تنشئ التعليمة {{url}} رابط URL بالنسبة للمجلدpublic. في المثال أعلاه فإن الرابط الذي ترجعه التعليمة هو http://larashop.dev/products؛ وهو الرابط الذي تتعامل معه دالة المسار products/. لإنشاء رابط إلى الصفحة الرئيسية فالتعليمة تكون: {{url('')}}نأخذ أيضا المثال التالي الموجود في المخطط الرئيس: <li><a href="{{url('products')}}" {{$page == 'products' ? 'class=active' : ''}}>Products</a></li>نلاحظ استخدام التعليمة url لإعطاء قيمة الرابط ضمن وسم <a>. في نفس السطر توجد تعليمة تشبه تعليمةً مألوفة في PHP وهي {{$page == 'products' ? 'class=active' : ''}}هنا نتحقق من قيمة المتغير page فإذا كانت تساوي products نضيف صنف CSS يسمّى active إلى الوسم. تعليمة {{asset}}:{{asset('css/bootstrap.min.css')}}تُرجع الدالة asset مسار مجلد public (أي عنوان الموقع) وتلحق به المعطى الممرَّر إليها. في السطر أعلاه ترجِع الدالةُ القيمةَ http://larashop.dev/css/bootstrap.min.css. تُستخدم هذه الدالة كثيرا لإضافة ملفات CSS، الصور وملفات JavaScript كما في الأمثلة التالية المأخدوذة من المخطط الرئيس. <!-- CSS --> <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet"> <!-- صورة --> <img src="{{asset('images/home/iframe1.png')}}" alt="" /> <!-- JavaScript --> <script src="{{asset('js/jquery.js')}}"></script>يمكن من خلال المعطيات الممرَّرة إلى الدالة asset في الأمثلة أعلاه اسنتاجُ أننا نستخدم مجلدًّا فرعيا في public لكل نوع من الموارد (CSS، الصور، JS إضافة للخطوط fonts). إن نظرت جيدا في ملف المخطط الرئيس فستميز ثلاثة أجزاء فارقة: الجزء الأول ويحوي الوسوم المؤسِّسة للجزء الأعلى المشترك بين مختلف صفحات الموقع، ويحوي ترويسة الموقع وقائمته الرئيسية.الجزء الثاني تمثله التعليمة ('yield('content@ وتلعب دور ماسك مكان Place holder. ستحدّد العروض الأخرى الممدّدة للمخطط الرئيس محتوى ماسك المكان.الجزء الثالث وبه التذييل المشترك بين صفحات الموقع.إن فهمت جيدا آلية عمل نظام القواعد فستعرف أن الجزأين الأول والثالث لا يتغيران بتغير الصفحة التي يطلبها الزائر. ما يتغير هو فقط الجزء الثاني الذي يعبئه نظام القوالب بمحتوى مختلف حسب الصفحة. الصفحات المشتقةننتقل الآن للعروض الخاصة بكل صفحة. يمدّد كل عرض المخطّط الرئيس. في ما يلي المنحى العام للعروض: @extends('layouts.layout') @section('content') <!--وسوم HTML --> @include('shared.sidebar') <!--وسوم HTML --> @endsectionيمدد العرض المخطط الرئيس بتنفيذ التعليمة التالية:@extends('layouts.layout')يعرّف مقطعا باسم content:@section('content')يُحمَّل محتوى المقطع content في المكان المعرّف بنفس الاسم في المخطّط الرئيس. ينتهي المقطع عند التعليمة endsection@. نضمِّن محتوى العرض sidebar الموجود في المجلد resources/views/shared:@include('shared.sidebar')تستخدم التعليمة include لتحميل محتوى عرض ضمن آخر. عرض sidebar الذي يمثل شريطا جانبيا للموقع موجود في أغلب الصفحات. نضيف وسوم HTML المأخوذة من قالب E-Shopper لتكوين الصفحة.تحديث المتحكم Frontنحدّث المتحكم Front.php ليحمل العروض بدلا من الاكتفاء بطباعة نص في الصفحة. يصبح محتوى المتحكم بعد التحديث على النحو التالي. تحمل كل دالّة العرض الموافق لها حسب جدول الدرس السابق. <?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; class Front extends Controller { public function index() { return view('home', array('page' => 'home')); } public function products() { return view('products', array('page' => 'products')); } public function product_details($id) { return view('product_details', array('page' => 'products')); } public function product_categories($name) { return view('products', array('page' => 'products')); } public function product_brands($name, $category = null) { return view('products', array('page' => 'products')); } public function blog() { return view('blog', array('page' => 'blog')); } public function blog_post($id) { return view('blog_post', array('page' => 'blog')); } public function contact_us() { return view('contact_us', array('page' => 'contact_us')); } public function login() { return view('login', array('page' => 'home')); } public function logout() { return view('login', array('page' => 'home')); } public function cart() { return view('cart', array('page' => 'home')); } public function checkout() { return view('checkout', array('page' => 'home')); } public function search($query) { return view('products', array('page' => 'products')); } } جرب تصفح الموقع والتنقل بين صفحاته. إذا اتبعت خطوات الدرس على النحو المشروع فستكون قادرا على التنقل بين صفحات الموقع دون مشاكل. يمكنك أيضا فتح الشفرة المصدرية لصفحات موقع الويب ومقارنتها بما كتبناه في قوالب Blade. خاتمةنحصل بنهاية الدرس على تصميم أنيق لصفحات الموقع، استخدمنا لإنشائه Blade الذي يوفر نظاما فعّالا لكتابة قوالب العروض في Laravel مما يتيح تجنب تكرار العناصر المشتركة. بانتهاء هذا الدرس نكون قد أنهينا أساس جزء العرض من بنية MVC. الدروس التالية من السلسلة تتناول بقية الأجزاء. ترجمة -وبتصرّف- لمقال Laravel 5 Blade Template لصاحبه Rodrick Kazembe.