البحث في الموقع

أنهينا الجزء الأكبر من العمل على تقرير المبيعات في الدرس السابق وستكون مهمتنا في هذا الدرس إضافة بعض اللمسات السحرية والتشطيبات النهائيَّة لبدء استعمال التقرير. سنتعلم في هذا الدرس بعض التوابع الجديدة التي سنضيفها إلى تقرير المبيعات وسنعرِّج على موضوع حماية أوراق العمل والنطاقات أثناء مشاركة الملف مع الآخرين ثمَّ سنتعرَّف على كيفيَّة استعمال التنسيق الشرطي. دمج مجموعة من التوابع استعملنا في الدرس السابق القائمة المنسدلة لإدراج المنتج المُباع (حقل رقم المنتج والوصف) ولكن توجد حقيقةً طريقة أخرى متقدمة نستعمل فيها التوابع لاختيار وصف المنتج بالبحث عنه في جدول المخزون. التوابع التي سنستخدمها هي: التابع طريقة الاستعمال الوصف IFERROR IFERROR(value, [value_if_error]) يُرجع هذا التابع القيمة الأولى إن لم تكن خطأً، وإن كانت خطأ فيرجع القيمة الثانية إن كانت موجودة أو يرجع قيمة فارغة. يُستعمل للتحكم في ظهور الأخطاء في الخلايا. IF IF(logical_expression, value_if_true, value_if_false) يُرجع القيمة الأولى (value if true) إن تحقَّق التعبير المنطقي (logical expression) ويرجع القيمة الثانية إن لم يتحقق. ISNA ISNA(value) يُستعمل للتحقُّق إن كانت القيمة (value) هي خطأ ذو الرمز "#N/A" أي غير متاح أو متوافر (not available) أو لا يتوافر جواب للعمليَّة، ويُرجع العبارة "true" إن كانت القيمة هي خطأ من النوع السابق أو يُرجع العبارة "false" إن لم تكن خطأ. VLOOKUP VLOOKUP(search_key, range, index, [is_sorted]) يُستخدم للبحث العمودي، ومُدخلات هذا التابع هي: search_key: القيمة التي نبحث عنها. Range: المجال الذي نبحث فيه. Index: رقم الحقل الذي نريد جلب القيمة المقابلة للقيمة التي نبحث عنها في العمود الأول من المجال المحدَّد. is_sorted: إن كانت القيم في المجال المحدَّد مرتَّبة نضع "true" وإن لم تكن مرتَّبة نضع "false". قبل استعمال التابع دعنا نفعل شيئًا يسِّهل عملنا؛ سننتقل إلى ورق المخزون ونحدِّد جدول المخزون أي عمود رقم المنتج والوصف ثمَّ نضغط بزر الفأرة الأيمن ونختار “تعريف النطاق المحدَّد” ونعطي للنطاق المحدَّد عنوان “المنتجات” ثمَّ نضغط على “تم“؛ إن أردنا استعمال النطاق السابق في التوابع أو أي مكان فما علينا سوى كتابة اسمه. مزيَّة عنونة النطاق هي بقاء النطاق ثابت مهما تحركت الخليَّة أو نُسخت إلى مكان آخر في الجدول إذ إن لم يُثبَّت النطاق فسيتغير نسبة إلى تغير عنوان الخليَّة. نُدرج التوابع السابقة في الخليَّة E8 للبحث عن الوصف المقابل لرقم المنتج المُدخل في الخليَّة D8 في جدول المخزون وذلك كما موضح في الصورة. استعملنا أولًا التابع IFERROR لإظهار الرسالة التي نريدها إن وُجد خطأٌ ما لتجنب ظهور رموز لا نرغب بها؛ وضعنا في الدخل الأول التابع IF والدخل الثاني الرسالة “لم يُعثر على المنتج” لإظهارها في حال وجود أي خطأ. القيمة المنطقية للتابع IF هي التابع ISNA مع التابع VLOOKUP للتأكد من وجود القيمة التي نبحث عنا؛ إذا لم يجد التابع VLOOKUP ما يبحث عنه فسيُرجع الخطأ ‎#N/A وحينئذٍ سيُرجع التابع ISNA العبارة true أي يوجد خطأ وبالتالي يأخذ التابع IF القيمة الأولى وهي “لم يُعثر على المنتج”. أمَّا إن وجد التابع VLOOKUP القيمة التي يبحث عنها فسيرجع التابع ISNA القيمة false أي لا يوجد خطأ وبالتالي سيختار التابع IF القيمة الثانية وهي التابع VLOOKUP أي القيمة التي يرجعها هذا التابع وهي التي نبحث عنها في جدول المخزون. لاحظ أنَّنا استعملنا عبارة “المنتجات” للدلالة على عنوان جدول المخزون الذي نودُّ البحث فيه ويمكن استعمال النطاق مباشرةً مع الضغط على F4 لتثبيت عنوان النطاق. نسحب الخليَّة E8 إلى الخلايا السفليَّة لنسخ العلاقة وستكون النتيجة كما موضح بالصورة. إن وَجدت للوهلة الأولى أنَّ الأمر معقدٌ فجرِّب كتابة العلاقة السابقة بنفسك وأعد قراءة الشرح مرةً أخرى وستفهمها بالتأكيد. حماية الأوراق والخلايا انتهينا من إنشاء تقرير المبيعات وأصبح جاهزًا للاستخدام. سنشارك هذا الجدول مع العامل ليُدخل بيانات المنتجات التي يبيعها ولكن ماذا لو غيَّر قيم خلايا لا يحق له تغييرها مثل تغيير قيم جدول المخزون أو تغيير محتوى خليَّة الوصف التي تعذبنا كثيرًا حتى أنشأناها أو في محتوى الخلايا الأخرى بقصد أو بغير قصد؟! سنضطر هنا إلى حماية الأوراق أو الخلايا من عبث الأشخاص الذين نشاركهم ملفاتنا وسنعطي كلَّ شخص الصلاحيات المناسبة للتعديل على الخلايا والأوراق. نضغط على السهم الموجود بجانب ورقة المخزون ونختار “حماية الورقة” أو نختار من قائمة البيانات ← الأوراق والنطاقات المحميَّة وستظهر قائمة في الطرف الأيسر. نضع وصفًا لحماية الورقة ثمَّ نحدِّد إن كنا نريد حماية الورقة بأكملها أو نطاق محدَّد ضمن الورقة ثمَّ نحدِّد اسم الورقة وإن كنا نريد أن نستثني بعض الخلايا ليتاح تعديلها ثمَّ نضغط على “تعيين الأذونات“. يظهر لدينا خيارين؛ الخيار الأول هو إظهار تحذير عند تعديل النطاق أو الورقة المحميَّة إذ تظهر رسالة تنبهك إلى أنَّه لا يفترض تعديل هذا النطاق وإن كنت واثقًا من التعديل فاضغط موافق سواءً لك أو لمن تشاركهم الملف. الخيار الثاني هو تقييد من يمكنه تعديل النطاق أو الورقة ومنع جميع الأشخاص من التعديل باختيار “أنت فقط” أو اختيار “مخصص” للسماح لبعض الأشخاص من التعديل على الورقة أو النطاق بوضع إشارة بجانب أسمائهم. عند حماية الورقة أو الخلايا لن يتمكن الآخرون من التعديل عليها ولكن يستطيعون رؤيتها بحسب الإذن المعطى لهم. يمكن حماية حقول الوصف ونسبة ومقدار الضريبة والإجمالي في جدول بيانات المبيعات حتى لا يعبث أحدٌ بها فنحصل على معلومات خاطئة بالطريقة نفسها ولكن نختار “حماية نطاق” بدلًا من ورقة. فكرة إضافية: يمكن في جدول المخزون وضع سعر لكل قطعة وعندما نختار رقم المنتج يوضع سعرها في حقل بيانات المبيعات مباشرةً مثل حقل الوصف وهنا نحتاج إلى حقل يصف عدد المنتجات المُباعة وبذلك نحمي سعر المنتج ويتبقى إدخال التاريخ والوقت ورقم المنتج وعدد القطع المُباعة فقط. التنسيق الشرطي يُستعمل التنسيق الشرطي لتنسيق الخلايا اعتمادًا على مجموعة من القواعد يحدِّدها المستخدم والتي توازن محتوى الخليَّة مع تلك القواعد وتنسِّقها بناءً على ذلك. نستعمله في جعل لون الخليَّة أحمر مثلًا إن كانت تحوي عبارة “راسب” ليسهل علينا تحديد الطلاب الراسبين أو إن كانت قيمة الخليَّة أقل أو أكبر من قيمة معيَّنة؛ توجد الكثير من القواعد لتنسيق النصوص والتواريخ والأرقام ويمكن تخصيص قاعدة جديدة غير موجودة. يوفر تطبيق جداول بيانات google نوعين من التنسيق هما: لون فردي وتدرج ألوان؛ سنُنسق حقل مقدار الضريبة باللون الفردي لتحديد قيمة الضريبة الأقل من 200 ليرة. نحدِّد حقل مقدار الضريبة ونضغط بزر الفأرة الأيمن ونختار “تنسيق شرطي” أو من قائمة التنسيق ← تنسيق شرطي ثمَّ نختار قاعدة “أصغر من أو يساوي” ثمَّ نضع القيمة 200 ونحدِّد تنسيق الخليَّة ونضغط “تم“. سنُنسق حقل الإجمالي وفق تنسيق التدرج اللوني لمعرفة القيمة العظمى والقيمة الصغرى المباعة في اليوم. نضغط على إضافة قاعدة جديدة ونختار “تدرج اللون” ثمَّ نحدِّد خلايا الحقل في مربع “ينطبق على نطاق”؛ نختار التدرج اللوني المناسب ثمَّ نختار “الحد الأدنى” من خيارات القيمة الدنيا وخيار “الحد الأقصى” من خيارات القيمة العظمى. يظهر تنسيق الحقل كما موضح في الصورة. توجد قواعد كثيرة في التنسيق الشرطي تنتظرك لاستكشافها والتي تسهِّل عليك تنسيق جدولك وتحليل البيانات وقراءتها بسرعة. الخاتمة انتهينا من إنشاء تقرير المبيعات وأصبح جاهزًا لملء البيانات فيه وآمنًا لمشاركته مع الآخرين. إنَّ ما تعلمته إلى الآن يمكِّنك من إنشاء أغلب الجداول التي ستلزمك في جميع أمور حياتك اليوميَّة وبأفضل تصميم؛ كل ما عليك هو فتح تطبيق جداول بيانات جوجل والبدء بتصميم جدولك.

بعد أن تعرَّفنا في المقالين السابقين على تطبيق جداول بيانات جوجل وألقينا نظرةً سريعةً عليه، سنكمل في هذا الدرس والدروس القادمة رحلتنا في استكشاف هذا التطبيق ومعرفة بعض مزاياه وكيفيَّة استعماله. سنتعلم في هذا الدرس كيفية إنشاء جدول وتنسيقه واستعمال الصيغ الحسابيَّة وبعض التوابع (functions). سننشئ جدولًا يحوي علاماتِ طلابٍ في مدرسة ما يحسب معدَّلاتهم الفصليَّة ويحدِّد إن كان الطالب ناجحًا أو راسبًا ثمَّ يحسب التقدير الذي يستحقه اعتمادًا على علاماته. إنشاء الجدول وتنسيقه نفتح تطبيق Google Drive ونضغط على "جديد" ثمَّ "جداول بيانات Google" أو نفتح تطبيق جداول بيانات Google مباشرةً وننشئ جدولًا جديدًا ونسميه "علامات الطلاب"؛ نغيِّر اتجاه الصفحة ليكون من اليمين إلى اليسار عبر قائمة تنسيق ← الاتجاه ← ورقة من اليمين إلى اليسار أو من شريط الأدوات مباشرةً. قد يلزمنا عدَّة أوراق عمل بحسب عدد المراحل الموجودة في المدرسة لذا سنغير اسم الورقة الحالية إلى "الصف السادس" بالضغط على السهم الصغير بجانب اسم الورقة واختيار "إعادة تسمية" أو الضغط على اسم الورقة مرتين. سنكتب في السطر الأول وصف البيانات التي سندخلها في الجدول التي تمثِّل أعمدته وهي اسم ورقم الطالب وأسماء المواد التي درسها في مرحلة معيَّنة خلال الفصل الأول والثاني والمعدَّل والنتيجة والتقدير. نلاحظ أنَّ اسم الفصل وأسماء المواد متوضعة في سطرين بينما الرقم واسم الطالب في سطر لذا سندمج خليَّة الرقم واسم الطالب مع الخليَّة أسفلها وندمج خليَّة الفصل الأول مع الخلايا التي بجانبها وكذلك بالنسبة لخليَّة الفصل الثاني وذلك عبر قائمة التنسيق ← دمج الخلايا ← دمج رأسيًّا أو دمج أفقيًّا بعد تحديد الخلايا المراد دمجها أو من شريط الأدوات مباشرةً بالضغط على دمج الخلايا. نوسِّط النص داخل الخلايا بمحاذاته أفقيًّا ورأسيًّا عبر قائمة التنسيق ← توسيط ووسط أو من شريط الأدوات بالضغط على محاذاة أفقيَّة أو رأسيَّة واختيار توسيط بعد تحديد خلايا رأس الجدول؛ يفضَّل تحديد كل خلايا الصفحة بالضغط على الخليَّة في الزاوية العلويَّة اليمينيَّة فوق خليَّة رقم الصف وجانب خليَّة اسم العمود وتحديد المحاذاة الوسطيَّة أفقيًّا ورأسيًّا. ندوِّر أسماء المواد بزاوية قدرها 90 درجة لكي لا تأخذ حيزًا من حجم الجدول عبر التنسيق ← تدوير النص ← تدوير للأسفل أو من قائمة الأدوات بالضغط على أيقونة تدوير النص واختيار وضع التدوير المناسب بالزاوية المطلوبة. نصغِّر حجم العمود المرافق لاسم المواد لتصغير حجم الجدول؛ هذا الأمر مفيد جدًا خصوصًا إذا كانت حقول الجدول كثيرة ونريد طباعته على ورقٍ بحجم صغير. نعدِّل تنسيق الخلايا لتظهر على أنَّها رأس الجدول وتتميز عن الخلايا الأخرى؛ نحدِّد الخلايا الرأسيَّة كلها ونكبِّر حجم الخط إلى 11 مثلًا ونختار التنسيق الغامق وذلك من شريط الأدوات. نغيِّر لون الخليَّة من "لون التعبئة" في شريط الأدوات ونغيِّر لون الخط بشكل متناسق. نضع حدودًا للخلايا بحيث تنقسم إلى مجموعات بحسب نوع البيانات التي تحتويها ونتحكم بنمط الحد ولونه وسماكته؛ نختار أصغر سماكة للحد ونحدِّد كل مجموعة متشابهة من الخلايا ونضع لها حدودًا داخليَّة فقط ثمَّ نغير نوع الحد إلى نوع الخط المزدوج أو أي نوع تختاره بحيث يختلف عن نوع الحد الداخلي ونضع للخلايا نفسها حدودًا خارجيَّة ثمَّ نحدِّد أعمدة الجدول (من A إلى Q) ونضع له حدودًا خارجية بالطريقة ذاتها. بقي لدينا تنسيق أسطر الجدول التي ستُملأ بالبيانات وذلك لتسهيل قراءتها؛ لدينا خيارين أولهما هو استعمال الألوان والثاني هو استعمال الحدود. نحدِّد أسطر الجدول لتمييزها بالألوان ونضغط على لون التعبئة في شريط الأدوات ونختار "الألوان البديلة" فتُفتح نافذة في القسم الأيسر. نختار من نمط التنسيق الألوان المناسبة كما يمكننا تحديد ألواننا المفضلة من أسفل القائمة؛ نُزِيلُ الإشارة بجانب خيار "الرأس" لأنَّنا نسَّقنا خلايا الرأس مسبقًا ولو لم ننسق خلايا الرأس نتركه ليضيف لونًا مختلفًا لرأس الجدول ثمَّ نضغط على "تم". إن رغبت في وضع تذييل للجدول فضع إشارة على "تذييل" لتمييزه. الطريقة الثانية لتنسيق أسطر الجدول هي وضع حدود لها. نحدِّد أسطر الجدول ونختار نوع الحدود المنقَّطة ثمَّ نضغط على خيار حد السطر فقط. ننهي بذلك تنسيق الجدول ليصبح جاهزًا لاستقبال البيانات. استعمال التوابع الرياضيَّة نستطيع عبر تطبيق جداول بيانات Google والتطبيقات المشابهة له إجراء العمليات الحسابيَّة الأساسيَّة بين خليتين أو أكثر بكتابة الرمز يساوي (=) وتحديد خليَّة ما وكتابة إشارة العمليَّة مثل الجمع أو الطرح أو القسمة أو الضرب ثمَّ تحديد الخليَّة الثانية أو كتابة أرقام مباشرةً. ماذا لو تعقَّدت العمليَّة الحسابيَّة مثل إيجاد متوسط قيم أو حساب الانحراف المعياري لمجموعة قيم؟ هنا يأتي دور التوابع التي تسهِّل العمليات الحسابيَّة والمنطقيَّة وتوسِّع عمل التطبيق إذ كلما دعم التطبيق عددًا أكبر من التوابع زادت قوته واتسع نطاق استخدامه. يدعم تطبيق جداول بيانات Google الكثير من التوابع والتي سنتعرف على جزء صغير منها. سنستعمل أولًا تابع التوسُّط (average) لحساب متوسِّط علامات الطلاب في الفصل الأول والفصل الثاني وكلا الفصلين في حقل المعدَّل؛ ندرج التابع average بالضغط على الخليَّة المحدَّدة ونكتب الرمز يساوي (=) ثمَّ نكتب اسمه، وعند كتابة الحروف الأولى منه تظهر اقتراحات عن التوابع مع شرح بسيط عنها. نختار التابع average بالضغط عليه فيظهر شرح عن كيفيَّة استعماله وهذا الشرح رائع جدًا إذ يشرح طريقة استعمال التابع بشكل صحيح ومُفصَّل وتوجد أمثلة كثيرة إذا فتحت الرابط الموجود أسفل الشرح؛ نحدِّد خلايا مواد الفصل الدراسي الأول وهي الخلايا من C3 وحتى G3 ثمَّ نضغط enter. سيظهر الخطأ ‎#DIV/0!‎ وهو قسمة عدد على صفر وهذا طبيعي لعدم وجود قيم، ويزول الخطأ بإدخال أرقام في الخلايا. ندرج التابع نفسه لحساب معدَّل الفصل الثاني ومعدَّل الفصلين مع تحديد الخلايا المناسبة. هنالك تابع مشابه للتابع average وهو التابع averagea والذي يُدخِل الخلايا التي تحوي نصًّا في حساب المتوسط مع اعتبار قيمتها صفرًا بينما يهملها التابع الأول بالكامل إن وُجدت بين القيم. حقل النتيجة هو تحديد إن كان الطالب ناجحًا أم راسبًا اعتمادًا على علاماته أو معدَّله. نستعمل التابع IF الذي يقارن صحة شرط منطقي ثمَّ يضع القيمة الأولى المُدخلة إن تحقق الشرط أو القيمة الثانية إن لم يتحقق، وتوضح الصورة التالية كيفيَّة استعماله. حدَّدنا الخليَّة O3 وهي معدَّل الفصلين شرطًا لنجاح الطالب بحيث إن كانت قيمتها أكبر أو تساوي 50 يُكتب في الخليَّة "ناجح" وإن كانت أقل يُكتب "راسب". ماذا لو أردنا اعتبار الطالب راسبًا إن رسب في إحدى مواده؟ يمكن في هذه الحالة استعمال التابع IFS لتحقيق عدَّة شروط واحدًا تلو الآخر. يتحقَّق هذا التابع من الشرط المنطقي الأول فإن تحقق يضع في الخليَّة العبارة المكتوبة بعده أي بعد الفاصلة وإن لم يتحقق ينتقل إلى تحقيق الشرط التالي ويتحقق منه ويستمر بالطريقة نفسها. نكتب التابع IFS في الخلية P3 ثمَّ نحدِّد في مدخلاته الخليَّة C3 التي تمثِّل المادة الأولى ويكون الشرط هو أصغر من 50 –العلامة الدنيا للنجاح- ونضع بعد الشرط عبارة "راسب" ثمَّ نضيف الخليَّة التي بجانبها مع شرط النجاح؛ نستمر بذلك حتى نصل إلى الخليَّة الأخيرة والتي نكررها مرتين الأولى إن كانت أصغر من 50 مع العبارة "راسب" والثانية أكبر أو يساوي 50 مع العبارة "ناجح" أي إن لم يتحقق شرط الرسوب في إحدى المواد يكون الطالب ناجحًا، وتوضح الصورة ذلك. لاحظ العلامات التي كتبناها في حقول المواد للتأكد من عمل التابع بشكل صحيح. نحدِّد التقدير الذي يحصل عليه الطالب بناءً على معدَّل الفصلين؛ يكون التقدير ممتاز إن كان معدَّله أكبر أو يساوي 90 وجيد جدًا إن كان معدَّله أكبر أو يساوي 80 وهكذا؛ نستعمل في هذه الحالة التابع IFS أيضًا كما موضح في الصورة. نحدِّد الخلايا من M3 وحتى Q3 التي استعملنا فيها التوابع ثمَّ نسحبها من الزاوية السفليِّة اليسرى حتى أسفل الجدول لنسخها للخلايا السفليِّة وبذلك ننتهي من إعداد جدول علامات الطلاب وكل ما علينا فعله الآن هو ملء الجدول بالعلامات وسيُحسب المعدَّل والنتيجة والتقدير مباشرةً. توجد توابع أخرى منها: SUM: يجمع الأعداد ضمن نطاق الخلايا المحدَّدة. MAX: يعطي أكبر قيمة من بين القيم المحدَّدة في نطاق الخلايا. MIN: عكس التابع السابق أي يعطي أصغر قيمة في نطاق الخلايا المحدَّدة. COUNT: يَعُدُّ الخلايا التي تحوي أرقامًا فقط والموجودة ضمن النطاق المحدَّد. COUNTA: يَعُدُّ الخلايا التي تحوي أرقامًا أو نصوصًا والموجودة ضمن النطاق المحدَّد. SUMIF: يجمع القيم العدديَّة التي تحقِّق شرطًا معيَّنًا. SUMIFA: تشبه سابقتها إلا أنَّه يمكن إضافة شروط متعدِّدة لجمع القيم. لا تقتصر التوابع على الأنواع السابقة ويمكنك زيارة هذه الصفحة لتصفح جميع التوابع التي يدعمها التطبيق.

بعد أن انتهينا من إعداد المشروع وإنشاء توابع وعروض الإنشاء والتخزين والعرض، سوف نقوم في درسنا الأخير اليوم بكتابة الشيفرة البرمجية لتوابع التعديل والتحديث والحذف ومن ثم العروض الموافق لها. تابع Editإن توابع وعروض edit وdelete غير موجودة لحد الساعة، فلننشئها، سنبدأ بالعمل على edit أولا. عدل على تابع المتحكم: public function edit($id) { $marketingImage = Marketingimage::findOrFail($id); return view('marketingimage.edit', compact('marketingImage')); }مرة أخرى قمنا باستخدام تابع findOrFail وقمنا بإرسال الكائن إلى العرض لأننا نريد أن نقوم بتعبئة الاستمارة مسبقا بالقيم المناسبة من سجلات البيانات. عرض Editعدل على ملف views/marektingimage/edit.blade.php ليكون كالتالي: @extends('layouts.master') @section('content') {!! Breadcrumb::withLinks(['Home' => '/', 'marketing images' => '/marketingimage', "edit $marketingImage->image_name.$marketingImage->image_extension" ]) !!} <h1>Edit {{ $marketingImage->image_name. '.' . $marketingImage->image_extension }} </h1> <hr/> @if (count($errors) > 0) <div class="alert alert-danger"> <strong>Whoops! </strong> There were some problems with your input. <br> <br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }} </li> @endforeach </ul> </div> @endif <div> Note: name and path values cannot be changed. If you wish to change these, then delete and create a new photo: </div> <br> {!! Form::model($marketingImage, ['route' => ['marketingimage.update', $marketingImage->id], 'method' => 'PATCH', 'class' => 'form', 'files' => true] ) !!} <!-- image name Form Input --> <div> <ul> <li> <h4>Image Name: {{ $marketingImage->image_name. '.' . $marketingImage->image_extension }} </h4> </li> <li> <h4>Image Path: {{ $marketingImage->image_path }} </h4> </li> <li> <h4>Mobile Name: {{ $marketingImage->mobile_image_name. '.' . $marketingImage->mobile_extension }} </h4> </li> <li> <h4>Mobile Path: {{ $marketingImage->mobile_image_path }} </h4> </li> </ul> </div> <!-- is_something Form Input --> <div class="form-group"> {!! Form::label('is_active', 'Is Active:') !!} {!! Form::checkbox('is_active') !!} </div> <!-- is_featured Form Input --> <div class="form-group"> {!! Form::label('is_featured', 'Is Featured:') !!} {!! Form::checkbox('is_featured') !!} </div> <!-- form field for file --> <div class="form-group"> {!! Form::label('image', 'Primary Image') !!} {!! Form::file('image', null, array('class'=>'form-control')) !!} </div> <!-- form field for file --> <div class="form-group"> {!! Form::label('mobile_image', 'Mobile Image') !!} {!! Form::file('mobile_image', null, array('class'=>'form-control')) !!} </div> <div class="form-group"> {!! Form::submit('Edit', array('class'=>'btn btn-primary')) !!} </div> {!! Form::close() !!} <div> {!! Form::model($marketingImage, ['route' => ['marketingimage.destroy', $marketingImage->id], 'method' => 'DELETE', 'class' => 'form', 'files' => true] ) !!} <div class="form-group"> {!! Form::submit('Delete Photos', array('class'=>'btn btn-danger', 'Onclick' => 'return ConfirmDelete();')) !!} </div> {!! Form::close() !!} </div> @endsection @section('scripts') <script> function ConfirmDelete() { var x = confirm("Are you sure you want to delete?"); if (x) return true; else return false; } </script> @endsectionلم نسمح للمستخدم بتعديل أسماء الصور أومساراتها لأننا نريدهم أن يقوموا بحذف السجلات والبدء من جديد وإلا سيكون الأمر معقدا عندما نقوم بتعديل الأسماء التي قمنا بحفظها في السجلات وهذا الأمر لا يدخل في نطاق الدرس. ماهي الاختلافات الأخرى في الاستمارة ؟ سوف تلاحظ أننا نستخدم حقول أقل وقمنا باستخدام الربط بين النموذج والاستمارة في مساعدي الاستمارة (form helper): {!! Form::model($marketingImage, ['route' => ['marketingimage.update', $marketingImage->id], 'method' => 'PATCH', 'class' => 'form', 'files' => true] ) !!}إن مثيل النموذج marketingImage$ مرتبط بالاستمارة لذلك سيتم تعبئة الحقول بشكل مسبق، ولاحظ أننا قمنا أيضا بتحديد marketingImage->id$ حتى نتمكن من إرسال ذلك إلى تابع المتحكم وتعديل السجل الصحيح. ولقد قمنا بتعيين قيمة PATCH إلى method وهذه سوف تتغير تلقائيا لأن HTML لا يدعم PATCH، ولقد قمنا بتعيين قيمة true إلى files حتى نتمكن من إرسال الملفات. بقية الشيفرة سهلة وقمنا بشرحها سابقا، لاحظ أننا قمنا بوضع زر للحذف في الأسفل في حالة ما أراد المستخدم الحذف بدل التعديل. عند سير العمل بطريقة عادية، سوف تكون خطوتك القادمة في الغالب الانتقال إلى تابع update في MarketingImagesController لكننا سنقوم بإنشاء صنف request للتعامل مع سيناريو update. EditImageRequestالفرق في عملية التحقق بين create و update هو أنه عندما تقوم بإنشاء صورة سيكون ملف الصورة إلزاميا على عكس التحديث، لذلك قررت لأجل البساطة والوضوح أن نقوم بإنشاء صنف request منفصل باسم EditImageRequest بدلا من وضعه في صنف request واحد. المشكلة التي واجهتها هي أنني لا أعرف كيف أجعلها شرطية فعلى أي تابع يجب وضع الصنف، لذلك بدأت في التفكير في الأمر، فبدلا من ذلك، يمكنني أن أقوم بتمرير حقل خفي والذي سوف يُعرف الاستمارة وسوف أقوم بوضع فيه عنصر تحكم منطقي (controlling logic)، فإذا كانت الاستمارة استمارة create، فستكون الصور إلزامية، لكنني في النهاية قررت أنه من الأسهل أن أقوم بعمل صنف منفصل. لذلك قم بتنفيذ هذا الأمر من سطر الأوامر: php artisan make:request EditImageRequestثم قم بتعيين قيمة return true في تابع authorize في ذلك الصنف وعدل تابع rules إلى التالي: public function rules() { return [ 'is_active' => 'boolean', 'is_featured' => 'boolean', 'image' => 'mimes:jpeg,jpg,bmp,png | max:1000', 'mobile_image' => 'mimes:jpeg,jpg,bmp,png | max:1000' ]; }قمنا بالفعل بالتحدث عن تابع rules سابقا ولا داعي لإعادة شرحه هنا. تابع Updateلنقم الآن بالانتقال إلى تابع update في MarketingImageController، عدله كما يلي: public function update($id, EditImageRequest $request) { $marketingImage = Marketingimage::findOrFail($id); $marketingImage->is_active = $request->get('is_active'); $marketingImage->is_featured = $request->get('is_featured'); $this->formatCheckboxValue($marketingImage); $marketingImage->save(); if ( ! empty(Input::file('image'))){ $destinationFolder = '/imgs/marketing/'; $destinationThumbnail = '/imgs/marketing/thumbnails/'; $file = Input::file('image'); $imageName = $marketingImage->image_name; $extension = $request->file('image')->getClientOriginalExtension(); //create instance of image from temp upload $image = Image::make($file->getRealPath()); //save image with thumbnail $image->save(public_path() . $destinationFolder . $imageName . '.' . $extension) ->resize(60, 60) // ->greyscale() ->save(public_path() . $destinationThumbnail . 'thumb-' . $imageName . '.' . $extension); } if ( ! empty(Input::file('mobile_image'))) { $destinationMobile = '/imgs/marketing/mobile/'; $mobileFile = Input::file('mobile_image'); $mobileImageName = $marketingImage->mobile_image_name; $mobileExtension = $request->file('mobile_image')->getClientOriginalExtension(); //create instance of image from temp upload $mobileImage = Image::make($mobileFile->getRealPath()); $mobileImage->save(public_path() . $destinationMobile . $mobileImageName . '.' . $mobileExtension); } flash()->success('image edited!'); return view('marketingimage.edit', compact('marketingImage')); }دعونا نبدأ بتوقيع التابع: public function update($id, EditImageRequest $request) {سوف ترى أننا نقوم بسحب مثيل من كائن request الصحيح، وقمنا باستخدام findOrFail في نموذج السجل حتى نتمكن من تعيين القيم من مثيل request، وبعد ذلك قمنا بتهيئة (format) قيم خانة الاختيار (checkbox) ثم حفظناها: $marketingImage = Marketingimage::findOrFail($id); $marketingImage->is_active = $request->get('is_active'); $marketingImage->is_featured = $request->get('is_featured'); $this->formatCheckboxValue($marketingImage); $marketingImage->save();إذا لم تكن الصورة الأولية فارغة، سوف نقوم بالتحديث: if ( ! empty(Input::file('image'))){ $destinationFolder = '/imgs/marketing/'; $destinationThumbnail = '/imgs/marketing/thumbnails/'; $file = Input::file('image'); $imageName = $marketingImage->image_name; $extension = $request->file('image')->getClientOriginalExtension(); //create instance of image from temp upload $image = Image::make($file->getRealPath()); //save image with thumbnail $image->save(public_path() . $destinationFolder . $imageName . '.' . $extension) ->resize(60, 60) // ->greyscale() ->save(public_path() . $destinationThumbnail . 'thumb-' . $imageName . '.' . $extension); }ثم سنفعل نفس الشيء على صور الهاتف: if ( ! empty(Input::file('mobile_image'))) { $destinationMobile = '/imgs/marketing/mobile/'; $mobileFile = Input::file('mobile_image'); $mobileImageName = $marketingImage->mobile_image_name; $mobileExtension = $request->file('mobile_image')->getClientOriginalExtension(); //create instance of image from temp upload $mobileImage = Image::make($mobileFile->getRealPath()); $mobileImage->save(public_path() . $destinationMobile . $mobileImageName . '.' . $mobileExtension); }ثم قمنا بتنفيذ flash لـ success وبعد ذلك قمنا بالعودة return وفي حالتنا هذه إلى صفحة التعديل edit، لكن يمكنك تغيير العودة إلى أي صفحة تريدها: flash()->success('image edited!'); return view('marketingimage.edit', compact('marketingImage'));أرجو ملاحظة أنه إذا كنت تقوم بعمل هذا لشركة تطوير، ربما قد تريد أن تجعل هذه الشيفرة أقوى عن طريق التحقق من أن الملف قد تم إنشاءه، وسوف تتعامل مع الأمر بشكل مختلف إذا لم يعمل لبعض الأسباب، لكن كل هذا خارج نطاق الدرس. حسنا، الآن آخر خطوة في درسنا. تابع Destroyسوف نحتاج إلى كتابة تابع destroy للتعامل مع حذف الصور: public function destroy($id) { $marketingImage = Marketingimage::findOrFail($id); $thumbPath = $marketingImage->image_path.'thumbnails/'; File::delete(public_path($marketingImage->image_path). $marketingImage->image_name . '.' . $marketingImage->image_extension); File::delete(public_path($marketingImage->mobile_image_path). $marketingImage->mobile_image_name . '.' . $marketingImage->mobile_extension); File::delete(public_path($thumbPath). 'thumb-' . $marketingImage->image_name . '.' . $marketingImage->image_extension); Marketingimage::destroy($id); flash()->success('image deleted!'); return redirect()->route('marketingimage.index'); }يمكنك أن ترى أننا قمنا باستخدام findOrFail على id الذي تم استلامه عن طريق التوقيع، ثم استخدمنا مساعدي الملف (File helper) لـ Laravel للحذف، وهكذا تحصلنا مرة أخرى على صياغة جميلة لتبين لنا ما نقوم بفعله. قمنا أيضا باستخدام تابع ()public_path ووضعنا مكونات الصورة داخل ذلك التوقيع، وبعد ذلك قمنا بتكرار نفس الأمر مع كل نوع من الصور مرتبط مع السجل، ثم استخدمنا تابع destroy لحذف السجل من قاعدة البيانات، وقمنا بتنفيذ flash لتابع success ومن ثم قمنا بإعادة التوجيه إلى صفحة index، وهاقد انتهينا. خاتمةلقد تعلمنا في هذه الدروس العديد من الطرق والمفاهيم الجديدة في Laravel، وعلى الرغم من بساطة التطبيق الذي قمنا بعمله إلا أنه سيكون بداية جيدة لاحتراف إدارة الصور في Laravel، وإذا كان لديك أي سؤال أو تعليق، فيسرنا أن نسمعه في التعليقات في الأسفل، وإذا أعجبتك هذه التدوينة، أرجو أن تقوم بمشاركتها مع أصدقاءك. ترجمة -وبتصرّف- للدرس Basic Image Management Part 3 لصاحبه Bill Keck. حقوق الصورة البارزة: Designed by Freepik.