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

كان من الشائع في بدايات التطوير للوب كتابةُ الاستمارات بوسوم HTML ثم إضافة شفرة مخصَّصة للتأكد من مُدخَلات الزائر. وفّرت لغة البرمجة PHP بعد ذلك دوالَّ معيارية للتحقّق من المُدخلات؛ خفّفت هذه الدوّال قليلا من العبء على المطوِّر إلا أنها تركت له مهمّة تعريف طريقة للتحقّق من المُدخلات ومن ثمّ معالجتها أو إشعار الزائر بالبيانات غير الصالحة وعرض الاستمارة من جديد. يزيح Laravel هذه المتاعب بتوفير شيفرة للتحقّق وطريقة للتعامل مع المُدخلات. يقدّم هذا المقال دليلا لكيفيّة إنشاء استمارات والتحقّق من مدخلات الزائر في Laravel. سنأخذ مثالا لإضافة تصنيف Category ضمن جدول تصنيفات Categories في تطبيق؛ يمكن أن يتعلّق الأمر بتصنيف منشورات مدوّنة، منتجات متجر أو أي شيء مماثل. تهيئة تطبيق Laravel نفترض أن Laravel مثبَّت وجاهز للعمل مع قاعدة البيانات. نهيّئ التطبيق قبل أن نشرع في إنشاء الاستمارة وأدوات التحقّق المصاحبة لها. إنشاء نموذج التصنيف والتهجير الموافق له سيتكون نموذج التصنيف من حقل للاسم إضافة إلى حقل المعرّف id والأختام الزمنية Timestamps. نستخدم artisan لتوليد النموذج والتهجير: $ php artisan make:model Category -m Model created successfully. Created Migration: 2016_06_13_010501_create_categories_table ثم نفتح ملفّ التهجير (داخل المجلّد database/migrations) ونحدّث الدالة up على النحو التالي: public function up() { Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->timestamps(); }); } ثم ننفّذ التهجير: $ php artisan migrate Migration table created successfully. Migrated: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_100000_create_password_resets_table Migrated: 2016_06_13_010501_create_categories_table ننتقل الآن للعمل على المتحكّم Controller الذي سيكون المسؤول عن معالجة محتوى الاستمارة. إنشاء المتحكم وتعريف المسارات نستخدم أداة artisan لإنشاء المتحكّم الذي سنستخدمه - من بين أمور أخرى - لعرض النموذج ومعالجة بياناته: $ php artisan make:controller CategoriesController.php --resource Controller created successfully. ينشئ أمر make:controller عند استخدام المعطى resource--متحكّما بدوال update، edit، store، create، show``index وdestroy. راجع درس أساسيات بناء التطبيقات في إطار العمل Laravel 5 للمزيد عن هذه الدوال. بقي لنا تعريف المسارات في الملفّ app/Http/routes.php؛ نستخدم Route::resource لهذا الغرض: Route::resource('categories', 'CategoriesController'); إنشاء العروض Views نركّز لأغراض هذا الدّرس على الدالتيْن create وstore المسؤولتيْن على التوالي عن عرض الاستمارة وتخزين بياناتها (في حال تجاوز اختبار التحقّق؛ كما سنرى). تبدو الدالتان لحدّ الساعة فارغتيْن: public function create() { // } public function store(Request $request) { // } ... نحدّث الدالة create كالتالي: public function create() { return view('categories.create'); } أي أننا نطلُب تقديم العرض create.blade.php الموجود في المجلّد resources/views/categories. ننشئ المجلّد categories وننشئ بداخله الملفّ create.blade.php. سنكتفي الآن بإضافة الوسوم التالية إلى ملفّ العرض: <h1>Create a Category</h1> يمكنك بعد حفظ الملفّ زيارة الرابط categories/create/ وسيظهر العنوان أعلاه. إنشاء استمارة في Laravel نريد أن نعرض للزائر استمارة لملئها؛ يمكن أن ننشئ هذه الاستمارة بكتابة وسوم HTML المطلوبة في ملفّ العرض create؛ إلا أنه يمكننا الاستفادة من حزمة laravelcollective/html لتولّي هذه المهمّة. نضيف الحزمة إلى مشروع Laravel بتنفيذ الأمر التالي داخل مجلّد المشروع: $ composer require laravelcollective/html ثم نفتح ملفّ الإعداد config/app ونضيف السطر التالي إلى مصفوفة providers: Collective\Html\HtmlServiceProvider::class, لتبدو المصفوفة كالتالي (نزعنا بعض محتويات المصفوفة للاختصار): 'providers' => [ ... App\Providers\AuthServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, Collective\Html\HtmlServiceProvider::class, ] نكمل مع نفس الملفّ بالانتقال إلى المصفوفة aliases التي نضيف إليها السّطر التالي: 'Form' => Collective\Html\FormFacade::class لتصبح كما يلي: 'aliases' => [ ... 'URL' => Illuminate\Support\Facades\URL::class, 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, 'Form' => Collective\Html\FormFacade::class ] احفظ الملفّ. أكملنا تثبيت الحزمة وإعدادها. نعيد فتح ملفّ العرض create ونعدّل محتواه ليصبح على النحو التالي: <h1>Create a Category</h1> {!! Form::open( array( 'route' => 'categories.store', 'class' => 'form') ) !!} @if (count($errors) > 0) <div class="alert alert-danger"> There were some problems adding the category.<br /> <ul> @foreach ($errors->all() as $error) <li></li> @endforeach </ul> </div> @endif <div class="form-group"> {!! Form::label('Category') !!} {!! Form::text('name', null, array( 'class'=>'form-control', 'placeholder'=>'List Name' )) !!} </div> <div class="form-group"> {!! Form::submit('Create Category!', array('class'=>'btn btn-primary' )) !!} </div> {!! Form::close() !!} </div> تضيف حزمة laravelcollective/html تعليمات خاصّة بإنشاء الاستمارات إلى نظام Blade للقوالب. يشير مسار الاستمارة إلى categories/store لأن دالّة store في المتحكّم CategoriesController هي التي ستتولّى معالجة بيانات الاستمارة. تستخدم التعليمة Form::open مبدئيا إجراء POST؛ لذا لا حاجة لتعيينه. يُستخدَم المقطع if..@endif@ لتقديم معلومات إلى المستخدم عن أخطاء التحقق. سنفصّل هذا الأمر بعد قليل. مرّرنا لأغراض جمالية أصنافا وخاصيّات من Bootstrap إلى الاستمارة ؛ هذا ليس ضروريا وستعمل الاستمارة بدونه. تظهر الآن الاستمارة بالذهاب إلى categories/create/. يمكنك إدخال اسم تصنيف وإرسال الاستمارة وستُوجَّه إلى categories/store/ لكنّ شيئا لن يحدُث لأننا لم نكتب حتى الآن شيئا في الدالة store من المتحكّم CategoriesController. معالجة الاستمارة نعود للدالة store في المتحكم CategoriesController. هذه هي الدالة التي تُرسَل إليها بيانات الاستمارة بعد النقر على زرّ الإرسال. نحدّث المتحكّم كالتالي: use App\Category; ... public function store(Request $request) { $category = new Category; $category->name = $request->get('name'); $category->save(); return \Redirect::route('categories.show', array($category->id)); } بدأنا أولا باستيراد النموذج Category في المتحكّم ثم استخدمناه في الدالة store لتخزين تسجيلة Record جديدة في جدول قاعدة البيانات اعتمادا على محتويات الاستمارة؛ ثم بعد التخزين نعيد توجيه المستخدم إلى الدالة show ضمن المتحكّم CategoriesController مع معرّف التصنيف الذي أضفناه للتو. يمكننا تعديل الدالة show كالتالي لعرض رسالة تفيد بنجاح إضافة التصنيف: public function show($id) { // $category = Category::find($id); $message = "$category->name has been added succefully"; return $message; } من الملاحظ أننا لم نتحقّق في العمليّة السابقة من مُدخلات المستخدم. يعني هذا أنه يمكن - مثلا - ترك الحقل الخاصّ باسم التصنيف فارغا وسيُحفظ تصنيف بدون اسم في قاعدة البيانات؛ طبعا هذا غير مقبول. التحقق من الاستمارة قبل الإرسال يوفّر Laravel 5 ميزة تُسمى طلب الاستمارة Form request تسمح بالتحقق من حقول الاستمارة دون تلويث المتحكّم. يدير ملفّ منفصل قواعد التحقّق من الاستمارة؛ نستخدم أمر artisan التالي لإنشاء هذا الملفّ: $ php artisan make:request CreateCategoryFormRequest Request created successfully. ينشئ الأمر ملفا باسم CreateCategoryFormRequest.php في المجلد app/Http/Requests. يبدو الملفّ كالتالي: <?php namespace App\Http\Requests; use App\Http\Requests\Request; class CreateCategoryFormRequest extends Request { public function authorize() { return false; } public function rules() { return [ // ]; } } عدّل الدالة authorize كالتالي: public function authorize() { return true; } نحتاج لتحديد القيمة true بالنسبة للدالة authorize لأنه في حال كانت القيمة false فلن تُعالج بيانات الاستمارة. ثم نعدّل الدالة rules: public function rules() { return [ 'name' => 'required' ]; } تعرّف الدالة قواعد التحقّق؛ عرّفنا أعلاه الحقل name ضمن الاستمارة بأنه مطلوب required؛ أي أن الاستمارة لن تُرسَل إلا إذا كانت توجد قيمة لهذا الحقل. تمكن إضافة أكثر من شرط على الحقل كالتالي: 'name' => 'required|alpha' نحتاج الآن لدمج طلب الاستمارة في الدالة store ضمن المتحكّم CategoriesController. نبدأ باستيراد الصنف في المتحكّم كالتالي: use App\Http\Requests\CreateCategoryFormRequest; ثم نحدّث الدالة store ليكون الكائن الممرَّر إليها من الصّنف CreateCategoryFormRequest: public function store(CreateCategoryFormRequest $request) { ... } ابتداءً من الآن سيتحقّق Laravel من بيانات الحقل قبل إرسالها؛ وفي حال الإخفاق في التحقق من الشرط سيعيد الزائر إلى صفحة الاستمارة مع عرض رسالة بوجود خطأ. ترجمة -وبتصرّف- للمقال Creating and Validating a Laravel 5 Form: The Definitive Guide. حقوق المقال محفوظة لصاحبه W. Jason Gilmore.

كانت البرامج التي اطلعنا عليها لحد الآن تعرض رسائل على الشاشة فقط، الذي لا يشتمل على حسابات حقيقية كثيرة. سيبين لك هذا الفصل طريقة قراءة الدخل من لوحة المفاتيح، واستخدام ذلك الدخل لحساب نتائج معينة، ثم تنسيق تلك النتائج وعرضها على الخرج. صنف System لقد استخدمنا System.out.println كثيرًا، لكن ربما لم تنتبه لمعناها. System هو صنف يوفر توابع متعلقة "بالنظام" (system) أو البيئة التي تعمل فيها البرامج. كما أنه يوفر أيضًا System.out، وهي قيمة خاصة توفر توابع لعرض الخرج، ومنها تابع println. في الواقع، يمكنك استخدام System.out.println لعرض قيمة System.out: System.out.println(System.out); النتيجة هي: java.io.PrintStream@685d72cd يدل هذا الخرج على أن System.out هو PrintStream، معرف ضمن حزمة تدعى java.io. الحزمة (package) هي مجموعة من الأصناف المتعلقة ببعضها؛ تحوي حزمة java.io الأصناف المتعلقة بالدخل والخرج اللذان يرمز لهما بالحرفين I/O والتي تعني Input and Output. أما الأرقام والأحرف بعد علامة @ فهي تمثل عنوان (address) الكائن System.out بشكل رقم ست عشري (في الأساس 16). عنوان القيمة هو موقعها في ذاكرة الحاسوب، وهذا الموقع قد يختلف بين الحواسيب المختلفة (أو عند تشغيل البرنامج في المرات التالية). كان العنوان في هذا المثال 685d72cd، لكن إذا شغلت البرنامج نفسه ثانية فقد تحصل على عنوان مختلف. كما يبين الشكل التالي، الصنف System معرفٌ في ملف اسمه System.java، وهناك ملف آخر يعرف فيه الصنف PrintStream اسمه PrintStream.java. هذه الملفات تابعة لمكتبة (library) لغة Java، وهي عبارة عن مجموعة ضخمة من الأصناف التي تستطيع استخدامها في برامجك. تشير تعليمة System.out.println إلى المتغير out ضمن الصنف System، وهو كائن من النوع PrintStream يوفر تابعًا يدعى println. صنف Scanner يحوي الصنف System أيضًا القيمة الخاصة System.in، وهي InputStream يوفر توابع لقراءة الدخل من لوحة المفاتيح. استخدام هذه التوابع ليس سهلًا؛ لكن لحسن الحظ أن Java توفر أصنافًا أخرى تسهل مهام الإدخال الشائعة. مثلًا، يوفر الصنف Scanner توابع لإدخال الكلمات، والأرقام، وغيرها من البيانات. يتوفر Scanner في الحزمة java.util، التي تحوي أصنافًا مفيدة جدًا تدعى "utility classes" (أصناف المرافق). قبل أن تتمكن من استخدام Scanner، عليك استيراده كالتالي: import java.util.Scanner; توضح تعليمة الاستيراد (import statement) للمترجم أنك عندما تقول Scanner فأنت تقصد أحد الأصناف المعرفة في java.util. هذه التعليمة ضرورية لأنه يحتمل وجود أصناف أخرى اسمها Scanner في حزم أخرى. استخدام تعليمة الاستيراد يجعل الكود واضحًا. لا يمكن استخدام تعليمات الاستيراد داخل تعريف صنف. تقليديًا، توضع تعليمات الاستيراد في بداية الملف. بعد ذلك عليك إنشاء Scanner: Scanner in = new Scanner(System.in); يصرح هذا السطر عن متغير من نوع Scanner ويسميه in وينشئ كائنًا جديدًا من نوع Scanner الذي يستقبل المدخلات من System.in. يوفر Scanner تابعًا يدعى nextLine الذي يقرأ الدخل من لوحة المفاتيح وترجع String. في المثال التالي نقرأ سطرين ونعيد إخراجهما للمستخدم: import java.util.Scanner; public class Echo { public static void main(String[] args) { String line; Scanner in = new Scanner(System.in); System.out.print("Type something: "); line = in.nextLine(); System.out.println("You said: " + line); System.out.print("Type something else: "); line = in.nextLine(); System.out.println("You also said: " + line); } } إذا أغفلت تعليمة الاستيراد ثم استخدمت Scanner سوف يعطي المترجم خطأ يشبه "Cannot find symbol" (لا يمكن العثور على الرمز). هذا يعني أن المترجم لا يعرف ماذا تعني عندما تقول Scanner. لعلك تتساءل لم يمكننا استخدام الصنف System دون استيراده؟ السبب هو أن الصنف System ينتمي لحزمة java.lang، التي تستورد آليًا في جميع البرامج. حسب وثائق اللغة فإن java.lang "توفر أصنافًا جوهرية في تصميم لغة البرمجة Java". صنف String ينتمي أيضًا لحزمة java.lang. بنية البرنامج لقد تعرفنا الآن على كافة العناصر التي تتكون منها برامج Java. يوضح الشكل التالي هذه العناصر التنظيمية. عناصر لغة Java، من الأكبر إلى الأصغر كمراجعة سريعة، الحزمة هي مجموعة أصناف، والأصناف تعرف فيها توابع. التوابع تحوي تعليمات، والتعليمات قد تحوي تعابير. تتكون التعابير من علامات (tokens)، وهي العناصر الأساسية للبرنامج، وتشمل الأرقام، وأسماء المتغيرات، والعوامل الحسابية، والكلمات المفتاحية، والرموز مثل الأقواس والفواصل المنقوطة. تأتي النسخة القياسية من Java مزودة بعدة آلاف من الأصناف التي يمكنك استيرادها، وهذا مثير جدًا ومخيف في نفس الوقت. يمكنك تصفح مكتبة جافا حيث أنها نفسها مكتوبة بلغة Java. لاحظ أن هناك فرق كبير بين لغة Java، التي تُعرّف التراكيب النحوية ومعاني العناصر المبينة في الشكل السابق، وبين مكتبة Java، التي توفر الأصناف المرفقة مع اللغة. التحويل من إنش إلى سنتيمتر دعنا نلق نظرة على مثال مفيد قليلًا. رغم أن معظم دول العالم اعتمدت النظام المتري للأوزان والمقاييس، إلا أن بعض الدول لا تزال عالقة مع الواحدات الإنكليزية. مثلًا، عندما يتحدث الأمريكان مع أصدقائهم من أوربا عن الطقس، قد يحتاجون للتحويل بين الدرجات المئوية والفهرنهايت. أو قد يرغبون بتحويل الأطوال من واحدة الإنش إلى السنتيمتر. يمكننا كتابة برنامج يساعد في ذلك. سنستخدم Scanner لإدخال القياسات بالإنش، ثم نحولها إلى سنتيمتر، ثم نعرض النتائج. تصرح السطور التالية عن المتغيرات وتنشئ Scanner: int inch; double cm; Scanner in = new Scanner(System.in); الخطوة التالية هي طلب المدخلات من المستخدم. سنستخدم تعليمة print بدلًا من println حتى يتمكن من كتابة المدخلات على نفس السطر. وسنستخدم تابع nextInt من الصنف Scanner، التي تقرأ الدخل من لوحة المفاتيح وتحوله إلى عدد صحيح: System.out.print("How many inches? "); inch = in.nextInt(); بعد ذلك، سوف نضرب الرقم المدخل بالقيمة 2.54، بما أننا نعرف أن كل إنش هو 2.54 سنتيمتر، ثم نعرض النتيجة: cm = inch * 2.54; System.out.print(inch + " in = "); System.out.println(cm + " cm"); هذه الأكواد تعمل بشكل صحيح، لكن هناك مشكلة صغيرة. إذا قرأ مبرمج آخر هذا الكود، فقد يتساءل من أين أتت القيمة 2.54. من أجل مصلحة الآخرين (ومصلحتك المستقبلية) يفضل إسناد هذه القيمة إلى متغير له اسم واضح. سنوضح ذلك في القسم التالي. القيم الحرفية والثوابت تدعى القيم التي تكتب في البرنامج، مثل 2.54، بالقيم الحرفية (literals). بشكل عام، ليس هناك مشكلة باستخدام القيم الحرفية. لكن عندما تظهر أرقام مثل 2.54 في التعابير دون أي تفسير، سوف تجعل الكود أصعب على القراءة. وإذا ظهرت القيمة نفسها مرات عديدة، وكانت هناك احتمال أن تتغير هذه القيمة في المستقبل، فهذا يجعل الكود أصعب على الصيانة والتجديد. هذه القيم تدعى أحيانًا الأرقام السحرية (magic numbers) (مع العلم أن الأشياء "السحرية" ليست جيدة هنا). من الممارسات الجيدة إسناد هذه القيم السحرية إلى متغيرات لها أسماء معبرة، كما يلي: double cmPerInch = 2.54; cm = inch * cmPerInch; هذه النسخة أسهل للقراءة وأقل عرضة للخطأ، لكن لا يزال هناك مشكلة. المتغيرات تتغير، لكن عدد السنتيمترات في الإنش الواحد لا يتغير. يجب ألا تتغير قيمة cmPerInch بعد إسناد قيمته أول مرة. توفر Java الكلمة المفتاحية final لفرض هذا الشرط. final double CM_PER_INCH = 2.54; التصريح عن متغير بكلمة final يعني أنه لا يمكن إسناد قيم جديدة له بعد نهيئته أول مرة. إذا حاولت تغيير قيمته، سوف يعطيك المترجم خطأ. تدعى المتغيرات التي يصرح عنها بكلمة final بالثوابت (constants). حسب التقاليد، تكتب أسماء الثوابت بحروف كبيرة، وتستخدم الشرطة المنخفضة (_) للفصل بين الكلمات. ترجمة -وبتصرف- للفصل Input and output من كتاب Think Java: How to Think Like a Computer Scientist لكاتبيه Allen B. Downey و Chris Mayfield.

لم تكن السكربتات التي نكتبها إلى الآن تفاعليةً، أي أنها لا تتطلب أيّ مدخلاتٍ من المستخدم. سنرى في هذا الدرس كيف نجعل السكربتات تسأل المستخدم أسئلةً وتحصل على الإجابة وتستخدمها. read استعمل الأمر read للحصول على مدخلات من لوحة المفاتيح. يأخذ الأمر read المدخلات من لوحة المفاتيح ويُسنِدها إلى متغير. هذا مثالٌ بسيطٌ عنه: #!/bin/bash echo -n "Enter some text > " read text echo "You entered: $text" عرضنا رسالةً في السطر الثالث، لاحظ كيف استعملنا الخيار ‎-n لكي نجعل الأمر echo يُبقي على مؤشر الكتابة موجودًا في نفس السطر، أي أنَّه لن يطبع محرف الانتقال إلى سطرٍ جديد (كالعادة). ثم استدعينا الأمر read مع تمرير text كوسيط، وما سيفعله هو انتظار المستخدم إلى أن يكتب شيئًا ثم يضغط على زر Enter، ثم سيُسنِد ما كتبه المستخدم إلى المتغير text. هذا مثالٌ جربنا فيه السكربت السابق: $ read_demo.bash Enter some text > this is some text You entered: this is some text إن لم تُحدِّد اسم المتغير الذي تريد أن يحفظ الأمر read مدخلات المستخدم فيه، فسيَستعمِل متغير البيئة REPLY. هنالك عدِّة خيارات للأمر read، أهم اثنين منها هما ‎-t و ‎-s. يأتي الخيار ‎ -tمتبوعًا بعدد الثواني التي سينتظر فيها الأمرُ read المستخدمَ لتوفير مدخلات. وهذا يعني أنَّ الأمر read سيتوقف عن قبول مدخلات من المستخدم بعد هذه المهلة الزمنية. يمكن أن يُستخدَم هذا الخيار إذا كان على السكربت الاستمرار في التنفيذ حتى لو لم يوفِّر المستخدم مدخلات (ربما ستوضع قيمة افتراضية بدلًا من مدخلات المستخدم في هذه الحالة). هذا مثالٌ عن الخيار ‎-t: #!/bin/bash echo -n "Hurry up and type something! > " if read -t 3 response; then echo "Great, you made it in time!" else echo "Sorry, you are too slow!" fi يؤدي الخيار ‎-s إلى عدم إظهار المدخلات التي يكتبها المستخدم على الشاشة، وهذا مفيدٌ عندما تسأل المستخدم عن كلمة مروره، أو غير ذلك من المعلومات السرية. العمليات الحسابية من البديهي أنَّ الحاسوب يستطيع إجراء عمليات حسابية بسيطة. توفِّر الصدفة إمكانية إجراء عمليات حسابية على الأعداد الصحيحة (integer). ما هي الأعداد الصحيحة؟ هي الأعداد الكاملة مثل 1 و 2 و 456 و -235 التي لا تحتوي على فواصل عشرية مثل 0.5 و ‎.443 أو 3.1415. إذا كان من الضروري أن تتعامل مع الأعداد العشرية، فهنالك برنامجٌ منفصل اسمه bc الذي تتعامل معه بلغة خاصة للحساب الدقيق، ويمكن أن يُستعمَل في سكربتات الصَدَفة لكنه خارج عن نطاق هذه السلسلة. لنقل أنَّك تريد استخدام سطر الأوامر كآلة حاسبة بسيطة. تستطيع فعل ذلك كالآتي: $ echo $((2+2)) عندما تواجه الصَدَفة التعبير ‎$(( ))‎ فستحاول وضع ناتج العملية الحسابية الموجودة داخل الأقواس بدلًا منه. لاحظ كيف سيتم تجاهل الفراغات: $ echo $((2+2)) 4 $ echo $(( 2+2 )) 4 $ echo $(( 2 + 2 )) 4 تستطيع الصَدَفة إجراء مختلف العمليات الحسابية الشهيرة (وغير الشهيرة). هذا مثالٌ عنها: #!/bin/bash first_num=0 second_num=0 echo -n "Enter the first number --> " read first_num echo -n "Enter the second number -> " read second_num echo "first number + second number = $((first_num + second_num))" echo "first number - second number = $((first_num - second_num))" echo "first number * second number = $((first_num * second_num))" echo "first number / second number = $((first_num / second_num))" echo "first number % second number = $((first_num % second_num))" echo "first number raised to the" echo "power of the second number = $((first_num ** second_num))" لاحظ أنَّ علامة $ التي تسبق أسماء المتغيرات غير ضرورية داخل التعابير الرياضية مثل first_num + second_num. جرِّب البرنامج الآتي وراقب كيف سيتعامل مع القسمة (تذكَّر أننا نقسِّم الأعداد الصحيحة هنا) وكيف سيتعامل مع الأعداد الكبيرة. عندما تصبح الأعداد كبيرةً جدًا، فسيحدث "فيضان" (overflow) في الذاكرة كما في عدَّاد المسافة المقطوعة في السيارات عندما يتجاوز عدد الكيلومترات التي صُمِّمَ لإحصائها. حيث يبدأ من جديد، لكن يجب المرور على الأعداد السالبة في الحاسوب (ﻷن هذه هي طريقة تخزين الأعداد داخليًا في الذاكرة). تؤدي القسمة على صفر (التي لا تجوز رياضيًا) إلى ظهور خطأ. أنا متأكد أنَّك ستتعرف على أول أربع عمليات التي هي الجمع والطرح والضرب والقسمة، لكن العملية الخامسة غريبة بعض الشيء، الرمز % يُمثِّل باقي القسمة (يُسمى modulo). تُجري هذه العملية القسمة لكن بدلًا من إظهار نتيجة القسمة، فستظهِر باقي القسمة. على الرغم من أنَّ ذلك لا يبدو مفيدًا جدًا، لكنه كذلك، حيث يوفِّر أداةً مفيدةً جدًا أثناء كتابة البرامج. على سبيل المثال، عندما يُعيد باقي القسمة القيمة صفر، فهذا يُشير إلى أنَّ العدد الأول هو من مضاعفات العدد الثاني، وقد تستفيد من هذه المعلومة كثيرًا: #!/bin/bash number=0 echo -n "Enter a number > " read number echo "Number is $number" if [ $((number % 2)) -eq 0 ]; then echo "Number is even" else echo "Number is odd" fi وكذلك الأمر في برنامج يُحوِّل الثواني إلى ساعات ودقائق: #!/bin/bash seconds=0 echo -n "Enter number of seconds > " read seconds hours=$((seconds / 3600)) seconds=$((seconds % 3600)) minutes=$((seconds / 60)) seconds=$((seconds % 60)) echo "$hours hour(s) $minutes minute(s) $seconds second(s)" ترجمة -وبتصرّف- للمقال Keyboard Input And Arithmetic لصاحبه William Shotts.

قدرات إعادة التوجيه (redirection) في لينكس توفّر لك العديد من الأدوات القوية التي يُمكن استخدامها لجعل جميع أنواع المهام أسهل للتنفيذ. سواءٌ كنتَ تكتبُ برمجياتٍ معقّدة أو كنتَ تقوم بإدارة الملفّات عبر سطر الأوامر، فإنّ معرفة كيفية التلاعب بتدفّقات (streams) الإدخال/الإخراج (input/output) على بيئتك الشخصية سيزيدُ من إنتاجيّتك بشكلٍ ملحوظ. التدفقات يتم توزيع الإدخال والإخراج في بيئة لينكس عبر ثلاث تدفّقات (streams) أساسية: إدخال معياري (stdin). إخراج معياري (stdout). خطأ معياري (stderr). هذه التدفّقات أيضًا مرقّمة وفق التالي: (stdin (0. (stdout (1. (stderr (2. أثناء التفاعلات المعيارية (standard interactions) بين المستخدم والطرفيّة (terminal)، فإنّه يتم نقل الإدخال المعياري عبر لوحة مفاتيح المستخدم. يتم عرض الإدخال المعياري و الخطأ المعياري على طرفية المستخدم كنصّ. بشكلٍ عام، جميع هذه التدفّقات الثلاثة يتم الإشارة إليها بـ"التدفّقات المعيارية". الإدخال المعياري تدفّق الإدخال المعياري عادةً ما يحمل البيانات من المستخدم إلى البرنامج. البرامج التي تتوقع إدخالًا معيّنًا من المستخدم تستقبل الإدخال عادةً من جهازٍ ما، مثل لوحة المفاتيح، الإدخال المعياري ينتهي عند وصوله نهاية الملف (EOF – End Of File). كما يتم وصفه بواسطة اسمه، فإنّ نهاية الملف أو "EOF" تُعلِم الحاسوب أنه لا يوجد هناك المزيد من البيانات ليتم قراءتُها. لرؤية الإدخال المعياري بصورةٍ حيّةَ، شغّل برنامج cat. كلمة Cat ترمز لـ"concatenate” أو "سَلسَلة الأشياء"، والتي تعني ربط الأشياء مع بعضها البعض على شكل سلسلة. يتم استخدام Cat بشكلٍ شائع لدمج محتويات ملفّّين. عندما يتم تشغيله لوحده فإنّ cat يقوم بفتح طرفيّته الخاصّة. cat بعد فتح cat، قم بإدخال مجموعة من الأرقام كالتالي: 1 2 3 ثم اضغط Ctrl+D. عندما تقوم بكتابة رقم والضغط على زرّ Enter، فإنّك تقوم بإرسال إدخال معياري (standard input) إلى برنامج cat الذي يعمل حاليًا، والذي هو بدوره يتوقّع وصول الإدخال إليه. يقوم برنامج cat بإرسال الإدخال الذي تُدخله إليه مرةً أخرى إلى الطرفية حيث يتم عرضه كإخراج معياري (standard output). إشارة EOF (أو نهاية مدّة حياة العملية الحالية – End of File) يُمكن أن يتم إرسالها إلى البرنامج بواسطة المستخدم عبر الضغط على مفاتحيّ Ctrl+D. بعد أن يتسلّم برنامج cat إشارة EOF فإنّ البرنامج يتوقف. الإخراج المعياري يقوم الإخراج المعياري (standard output) بكتابة البيانات التي يتم إنشاءها بواسطة البرامج. عندما لا يتم إعادة توجيه تدفّق الإخراج المعياري، فإنّه سيتم إخراج النصّ إلى الطرفية. جرّب المثال التالي: echo Sent to the terminal through standard output الخطأ المعياري يقوم الخطأ المعياري (standard error) بكتابة الأخطاء التي يتم إنشاؤها بواسطة البرامج التي فشلت في أن يتم تنفيذها في مرحلةٍ ما. تمامًا مثل الإدخال المعياري فإنّ الوجهة الافتراضية لهذا التدفّق هي شاشة الطرفيّة. عندما يتم إرسال تدفّقِ خَطَأٍ معياريٍ لبرنامجٍ إلى برنامجٍ آخر، فإنّ البيانات المُرسلة (المتكوّنة من أخطاء البرنامج) يتم إرسالها بشكلٍ موازي إلى الطرفية كذلك. فلنرى مثالًا بسيطًا عن الخطأ المعياري باستخدام ls. يقوم الأمر ls بسرد محتويات المجلّدات أو المسارات. عندما يتم تنفيذه بدون أيّ معطيات، فإنَّ أمر ls يقوم بسرد محتويات المسار الحالي. إذا تمّ تشغيله مع مسارٍ معيّن كمُعطَى، فإنّه سيقوم بسرد محتويات المسار المطلوب. ls % بما أنّ % ليس مسارًا موجودًا، فإنّه سيتم إرسال النصّ التالي كخطأٍ معياري: ls: cannot access %: No such file or directory إعادة توجيه التدفق يمتلك نظام لينكس أوامرًا مُضمّنة لإعادة توجيه كلّ تدفّق. تقوم هذه الأوامر بطباعة إخراجٍ معياري إلى ملفٍّ ما. إذا تم استهداف ملفٍّ غير موجود، فإنّه سيتم إنشاء ملفٍّ جديد باسم ذاك الملفّ ليتم الكتابة عليه. الأوامر التي يأتي معها قوسٌ واحد (إشارة >) تقوم بالكتابة فوق ملفّ الوجهة الموجود. بالأسفل تجد بعض الإشارات الشائع استخدامها مع الأوامر عند التعامل معها بالطرفية لإعادة توجيه التدفّقات: 1. الكتابة فوق الملفات > إخراج معياري. < إدخال معياري. 2> خطأ معياري. 2. الإضافة إلى الملفات الأوامر التي يتم استخدامها مع قوسين اثنين لا تقوم بالكتابة فوق الملفّّات، بل تقوم بالكتابة إلى نهاية الملفّّات: >> إخراج معياري. << إدخال معياري. 2>> خطأ معياري. فلنأخذ المثال التالي: $ cat > write_to_me.txt a b c > ctrl-d يتم استخدام cat هنا لتتم عملية الكتابة إلى أحد الملفّّات، والذي يتم إنشاؤه تلقائيًا بسبب عدم وجوده ولأن الأمر الأول يحتاجه. لطباعة محتويات الملفّ write_to_me.txt باستخدام cat: $ cat write_to_me.txt يجب أن ترى أنّ الملفّ يحتوي على التالي: a b c الآن قم بإعادة توجيه cat إلى write_to_me.txt مجددًا وقم بإدخال الأرقام التالية: $ cat > write_to_me.txt 1 2 3 > ctrl-d عندما تستعمل cat لعرض محتويات write_to_me.txt، يجب أن ترى التالي: 1 2 3 أخيرًا، قم بعمل إعادة توجيه أخرى لـ cat ولكن هذه المرّة باستخدام قوسين عوضًا عن قوسٍ واحد: cat >> write_to_me.txt a b c ctrl-d وافتح ملفّ write_to_me.txt مجددًا، وسترى التالي: 1 2 3 a b c يحتوي الملفّّ الآن على النصّ من المرّة الأخيرة لاستخدام الأمر cat والتي قبلها، لأنّ الثانية لم تقم بالكتابة فوق الأولى. الأنابيب يتم استخدام الأنابيب (Pipes) لإعادة توجيه تدفّقٍ من برنامجٍ إلى آخر. عندما يتم إرسال الإخراج المعياري الخاص بأحد البرامج إلى برنامجٍ آخر عبر أنبوب (pipe) فإنّ بيانات البرنامج الأول والتي تمّ تلقّيها من طرف البرنامج الثاني سوف لن تظهر في الطرفية. فقط البيانات المُرشّحة عبر البرنامج الثاني سوف يتم عرضها. الأنبوب في نظام لينكس يتم تمثيله بإشارة شريطٍ عمودي: *|* وكمثالٍ على أمرٍ يستخدم أنبوبًا: ls | less هذا الأمر يقوم بأخذ ناتج الأمر ls (والذي يقوم بعرض محتويات المسار الحالي الذي أنت فيه) ويقوم بتمريره عبر أنبوبٍ إلى برنامج less. يقوم less بعرض البيانات المُرسلة إليه سطرًا سطرًا بدلًا من عرضها كاملة. بشكلٍ عام، يقوم ls بعرض محتويات المسار المطلوب عبر عرض الخرج بأكمله دفعةً واحدة. عندما تقوم بتشغيل ls عبر less فإنّ كلّ مُدخَلة يتم عرضها في سطرٍ واحد فقط خاصٍ بها ولا يتم عرض الخرج كله دفعةً واحدة، بل واحدة واحدة. على الرغم من أنّ وظيفة الأنابيب قد تبدو مشابهةً لإشارات الأقوس < و << (إعادة توجيه الإخراج المعياري)، فإنّ الفرق هو أنّ الأنابيب تقوم بتوجيه الخرج من أمرٍ إلى آخر، بينما تقوم إشارات الأقواس مثل < و << بتوجيه الخرج حصرًا إلى الملفّات فقط. المرشحات المرشّحات (filters) هي عبارة عن أوامر تعدّل على أنابيب إعادة التوجيه والإخراج. لاحظ أيضًا أنّه يمكن استخدام أوامر المرشّحات وأوامر لينكس العادية دون الحاجة لاستخدام الأنابيب. find: يقوم برنامج find بعرض الملفّات التي يتطابق اسمها مع المعطيات المُمررة له. grep: يقوم برنامج grep بعرض النصّ الذي يتطابق مع النصّ المُمرر إليه. tee: مهمّة برنامج tee هي إعادة توجيه الإدخال المعياري إلى كلٍ من الإخراج المعياري وملفٍّ واحد أو أكثر. tr: يقوم برنامج tr بالبحث عن سلسلة (string) واستبدالها بواحدة أخرى. wc: عدّاد للمحارف، السطور والكلمات. أمثلة قد تعرّفت الآن على إعادة التوجيه، استخدام الأنابيب والمرشّحات الأساسية، فلنلقي نظرةً على بعض أنماط إعادة التوجيه الأساسية والأمثلة. الأمر > الملف يقوم هذا النمط بإعادة توجيه ناتج أمرٍ معين إلى ملفّ، مثال: ls ~ > root_dir_contents.txt سيقوم الأمر السابق بتمرير محتويات مجلد الجذر (root directory) وكتابتها إلى ملفٍّ يدعى root_dir_contents.txt. سيقوم أيضًا بالكتابة فوق أيّ بيانات موجودة في ذاك الملفّ كوننا نستخدم قوسًا واحدًا فقط (>). الأمر > dev/null/ dev/null/ هو ملفٌّ خاص يتم استعماله لحذف أيّ بياناتٍ يتم توجيهها له. يتم استخدامه للتخلص من الخرج الذي لا نحتاجه والذي يُمكن أن يتعارض أحيانًا مع وظيفة أمرٍ آخر أو سكربت (script). يتم إهمال أي خرجٍ يتم إرساله إلى dev/null/. في المستقبل، ربّما تقوم باستخدام إعادة توجيه الخرج الناتج عن الأوامر والأخطاء إلى dev/null/ عند كتابة سكربتات الشلّ (shell scripts). ls > /dev/null سيقوم الأمر السابق بإهمال تدفّق الإخراج المعياري (standard output stream) العائد من الأمر ls عبر تمريره إلى الملفّ dev/null/ الذي سيتخلص منه. الأمر 2> الملف يقوم هذا النمط بتوجيه تدفّق الخطأ المعياري لأمرٍ ما إلى ملفّ، حيث يقوم بالكتابة فوق محتوياته الموجودة. كمثال: mkdir '' 2> mkdir_log.txt هذا الأمر سيوجّه رسالة الخطأ الصادرة عن "اسم المسار الخاطئ" ويكتبها إلى ملفّ mkdir_log.txt. لاحظ أنّه سوف يتم إرسال رسالة الخطأ أيضًا إلى الطرفية ليتمّ عرضها كنص. الأمر >> الملف يقوم هذا النمط بتوجيه ناتج أمرٍ ما إلى ملفّ دون الكتابة فوق محتويات الملفّ الحالية. مثال: echo Written to a new file > data.txt echo Appended to an existing file's contents >> data.txt هذان الأمران سيقومان أولًا بالكتابة فوق محتويات data.txt، ومن ثمّ سيتم الكتابة أسفل المحتويات الحالية لملفّ data.txt بواسطة الأمر الثاني، محتويات الملفّ يجب أن تبدو هكذا: Written to a new file Appended to an existing file's contents الأمر 2>> الملف يقوم النمط السابق بتوجيه تدفّق خطأٍ معياري لأمرٍ ما إلى ملفّ دون الكتابة فوق محتوياته الحالية. هذا النمط مفيد لإنشاء ملفّّات السجل (log files) لبرنامجٍ أو خدمة، حيث أنّه لن يتم محو محتويات الملفّ السابقة في كلِّ مرةٍ يتم الكتابة فيها إلى الملفّ. find '' 2> stderr_log.txt wc '' 2>> stderr_log.txt يوجّه الأمر أعلاه رسالة الخطأ الصادرة عن معطىٍ خاطئ للأمر find إلى ملفٍّ يُدعى stderr_log.txt. ومن ثمّ يقوم بتوجيه رسالة الخطأ الصادرة عن استخدامٍ خاطئ للأمر wc إلى نفس الملفّ. الأمر | الأمر يقوم بتوجيه خَرْجِ الأمر الأول إلى دَخْلِ الأمر الثاني. find /var lib | grep deb هذا الأمر يبحث عبر مجلّد var/ ومجلّداته الفرعية عن الملفّات والامتدادات المُطابقة للسلسلة "deb"، ويُرجِع مسارات تلك الملفّات مع تمييز الجزء المطابق من أسماء تلك بالملفّات بالسلسلة المبحوث عنها. الأمر | tee الملف هذا النمط (والذي يتضمّن أمر tee) يقوم بتوجيه ناتج أمرٍ معيّن إلى ملفّ والكتابة فوق محتوياته ومن ثمّ يقوم بعرض الناتج المُوجّه بالطرفية. حيثُ ينشئ ملفًّّا جديدًا في حال كان الملفّ غير موجود. في سياق هذا النمط، يتم استخدام الأمر tee عادةً لعرض ناتج أمرٍ معين بينما يتمّ أيضًا حفظه إلى ملفّ. كمثال: wc /etc/magic | tee magic_count.txt هذا الأمر يقوم باستخدام الأنابيب لنقل عدد المحارف، السطور والكلمات في ملفّ etc/magic/ (الذي يتم استخدامه بواسطة صدفة لينكس لتحديد نوع الملفّّات) إلى الأمر tee، والذي بدوره يقوم بفصل ناتج الأمر wc إلى اتّجاهين، ويقوم بإرساله إلى شاشة الطرفية وملفّ magic_counts.txt. بالحديث عن الأمر tee، فتخيّل الحرف T، نهاية هذا الحرف هي البيانات الكاملة، وقمّة هذا الحرف هو البيانات عندما يتم فصلها إلى اتّجاهين (الإخراج المعياري لملفٍّ ما وشاشة الطرفية). أمر | أمر | أمر >> ملف يقوم هذا النمط بتوجيه ناتج الأمر الأوّل وترشيحه عبر الأمرين الثانيين. ومن ثمَّ يقوم بطباعة الناتج إلى ملفّ. مثال: ls ~ | grep *tar | tr e E >> ls_log.txt الخاتمة تعلّم كيفية استخدام قدرات إعادة التوجيه في لينكس عند التعامل مع الأوامر قد يكون شاقًا قليلًا، ولكنك في طريقك بالفعل لاحتراف هذه المهارات بعد إكمالك لهذا الدليل. الآن وبعد أن شاهدت أساسيات كيفية عمل إعادة التوجيه والأنابيب، فستكون قادرًا على بدء رحلتك إلى عالم برمجة سكربتات الشلّ، والذي يستخدم بشكلٍ شائع غالب البرامج والأنماط المُغطّاة في هذا الدليل. إذا كنتَ تحبّ الغوص أكثر في الأوامر التي قدّمناها في هذا الدليل، فيُمكنك ذلك باستخدام الأمر man command | less. كمثال: man tee | less هذا الأمر سيُريك قائمةً كاملة بالأوامر المتوفّرة لبرنامج tee. يمكنك استخدام هذا النمط لعرض المعلومات وخيارات الاستخدام لأيّ أمرٍ أو برنامج في نظام لينكس. ترجمة -وبتصرّف- للمقال: An Introduction to Linux I/O Redirection لصاحبه David Collazo.

سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر <"input type="file> بالطريقة الصحيحة والسليمة وباستعمال العنصر <label> وبعض الجافاسكربت. معاينة النتيجة النهائية. يمكنك تحميل الشيفرة المصدرية للأمثلة من هنا. هناك العديد من الطرق لتخصيص العنصر <"input type="file> وقد جربت العديد منها ولكنها لم تعجبني ولم تُلبّي متطلباتي. لذلك حاولت البحث في Google ولكني لم أجد مبتغاي. وبعد أن فقدت الأمل وظننت أنني لن أجد ما أبحث عنه وقعت عيني بالصدفة على أحد التعليقات الموجودة في موقع StackOverflow، وكان ذلك التعليق يحتوي على كلمة "<label>" وكان ذلك بداية الخيط وأعتقد أنّه ما كنت أبحث عنه. وكما تعلمون فالنقر على عنصر label يؤدي إلى تفعيل أحد عناصر <input> مرتبطة به، ومما يثير الاهتمام أنّه إذا كان ذلك العنصر عبارة عن <"input type="file> فإنّ النقر على الـlabel المرتبطة به يؤدي إلى فتح متصفح الملفات وهذا هو الحل المثالي الذي كنت أبحث عنه. <input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label>أي أنّ النقر على أي واحد من هذين العنصرين (<label> أو <"input type="file>) سوف يعطي نفس النتيجة وهي فتح متصفح الملفات، وهذا يعني أنّ أصعب جزء قد تم حلُّه. لن نحتاج إلى جافاسكربت أو حلول معقدة، كل ما نحتاجه هو السطرين البرمجيين الموجودين في الأعلى. أنظر إلى الصورة في الأسفل. دعونا الآن نقوم بتنسيق العناصر حتى تبدو وكأنّنا نملك زرا عاديا. إخفاء عنصر <input>في البداية يجب علينا إخفاء العنصر <input>، وسوف تتكفل الخاصيتين display: none أو visibility: hidden بذلك. لماذا نريد إخفاءه؟ لأنّ قيمة المُدخل (input) لن يتم ارسالها إلى الخادوم عندما نقوم بعمل تسليم (submit) للنموذج. والسبب الثاني هو أننا لا نريد أن يتم تحديد ذلك العنصر عندما يقوم الزائر بتصفح الموقع باستعمال الزر tab الموجود على لوحة المفاتيح (لأننا نريد لموقعنا أن يكون قابل للوصول accessible). وبناءً على ذلك قمت باستعمال تنسيقات CSS التي تراها في الأسفل التي سوف تعمل على إخفاء العنصر عن أنظارنا ولكنه سيبقى مرئي بالنسبة للمتصفح نفسه: .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }قد تتسائل لماذا وضعنا القيمة 0.1px لكل من العرض والارتفاع وليس 0px. يعود السبب في ذلك إلى أنّه إذا أعطينا عنصر ما عرض وارتفاع بقيمة 0px فإنّنا لن نتمكن من استخدام زر tab على تلك العناصر في بعض المتصفحات. وأمّا بالنسبة للخاصية position: absolute فقد استخدمناها حتى نمنع أن يتداخل العنصر مع العناصر الأخرى. تنسيق العنصر <label>بما أنّ العنصر <label> هو الزر افتراضيًا فإننا نستطيع تنسيق هذا العنصر كما نريد. سنقوم بشيء بسيط هنا ولن نجعل التنسيقات معقدة: .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } .inputfile:focus + label, .inputfile + label:hover { background-color: red; }الوصولية (accessibility)كيف يمكنك أن تعرف بأنّ أحد عناصر الصفحة قابل للنقر عليه؟ هناك شيئان يدلان على ذلك، الأول هو أنّ العنصر يجب أن يظهر عليه ذلك، بحيث يعطيك شعورًا بأنّه يمكنك النقر عليه أو استعمال زر tab، والثاني هو أنّه يجب أن يتغير مؤشر الفأرة إلى شيء مناسب عندما تقوم بوضع مؤشر الفأرة عليه. وبما أننا قمنا بفعل الشيء الأول سابقًا (من خلال التنسيقات الموجودة في الأعلى) فسوف نهتم بالشيء الثاني (تغير مؤشر الفأرة عند وضعه عليه) باستعمال بعض الأكواد البسيطة: .inputfile + label { cursor: pointer; /* "hand" cursor */ }أنظر إلى الصورتين التاليتين ولاحظ أنّ في الصورة الأولى لا يتغير مؤشر الفأرة على عكس الصورة الثانية التي يتغير فيها مؤشر الفأرة عند وضعه على العنصر ليعطي انطباعًا بأنّ هذا العنصر قابل للنقر. التصفح/التنقل باستخدام لوحة المفاتيحإن كان زوار موقعك لا يستطيعون تصفح موقعك باستخدام لوحة مفاتيح فقط فتأكد حينها أنّك تقوم بشيء خاطئ ويجب عليك اصلاحه. وقد كان إخفاء عنصر <input> بطريقة صحيحة هو أحد الأشياء الجيدة لتحسين تجربة المستخدم، وأمّا الشيء الآخر هو أن تُعطي للمستخدم انطباعًا ما بأنّ العنصر قد أصبح في حالة focus (يُصبح العنصر في حالة focus عند التصفح باستخدام زر tab في لوحة المفاتيح، وبالتالي نستطيع استخدام الفئة الزائفة focus: على ذلك العنصر): .inputfile:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }تُستخدم القيمة webkit-focus-ring-color auto 5px من أجل الحصول على المظهر الإفتراضي للخط الخارجي (outline) في متصفحات Chrome، Opera وSafari. وبالنسبة للقيمة 1px dotted #00 فهي موجودة فقط للمتصفحات التي لا تفهم -webkit-. مشاكل متعلقة باللمس (touch)إذا كنت تستخدم FastClick (وهي مكتبة للتخلص من الإيقاف المؤقت للنقر والذي مُدته 300ms في الأجهزة التي تعمل باللمس) وكنت تنوي إضافة عناصر إضافية داخل العنصر <label>، فإنّ الزر لن يعمل كما يجب إلا إذا استخدمت الخاصية pointer-events: none: <label for="file"><strong>Choose a file</strong></label>.inputfile + label * { pointer-events: none; } تحسين بعض الأمور باستخدام الجافاسكربتبقي علينا شيء واحد يجب فعله وهو إظهار إذا ما كان هناك ملفات تم اختيارها أم لا. ومع أنّ العنصر <"input type="file> يُظهر ذلك عادةً إلا أننا قمنا بإخفائه إن كنت تذكر، ولكن لحسن حظنا فهناك طريقة لفعل ذلك باستخدام الجافاسكربت بحيث نجعل نص الـlabel هو اسم الملف المُختار، وإذا كان هناك عدة ملفات فإنّ نص الـlabel يصبح عدد تلك الملفات: <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />var inputs = document.querySelectorAll( '.inputfile' ); Array.prototype.forEach.call( inputs, function( input ) { var label = input.nextElementSibling; labelVal = label.innerHTML; input.addEventListener( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else fileName = e.target.value.split( '\\' ).pop(); if( fileName ) label.querySelector( 'span' ).innerHTML = fileName; else label.innerHTML = labelVal; }); });قمت أيضًا بكتابة أكواد jQuery تقوم بنفس العمل، لذلك تأكد من أن تتصفح الملف المصدري إن كنت تفضل استخدام jQuery. توضيح بسيط للأكواد الموجودة في الأعلى:وجود الصفة multiple في عنصر <input> يسمح للمستخدم بأن يختار أكثر من ملف مرة واحدة. أمّا الصفة data-multiple-caption فهي تستخدم للتعبير عن الرسالة التي تريد أن تظهر للمستخدم عندما يقوم باختيار عدة ملفات. وبالنسبة للعبارة { count } فهي اختيارية وسوف يتم استبدالها برقم يُعبّر عن عدد الملفات المُختارة.الصفة multiple غير مدعومة في متصفح Internet Explorer 9 أو أقل ولا حتى الخاصية files الخاصة بالجافاسكربت، ولذلك سوف نعتمد على value. وبما أنّها عادةً تحتوي على قيمة بالصيغة C:\fakepath\filename.jpg فإنّ ()split( '\\' ).pop تقوم باستخراج اسم الملف.من المثير للاهتمام أنّه يمكنك إلغاء قيمة من المدخلات عن طريق الضغط على زر ESC عندما تكون نافذة تصفح الملفات مفتوحة، وهذا متاح فقط في متصفحي Chrome وOpera. ولهاذ استخدمنا المتغير labelVal لتخزين القيمة الافتراضية للـlabel وإرجاعها عند الحاجة لذلك.سوف تكون النتيجة النهائية كما في الصورة: ولكن ماذا لو كانت الجافاسكربت غير مفعلة؟بما أنّه لا يوجد طريقة أخرى غير الجافاسكربت لمعرفة إذا ما قام المستخدم باختيار ملف أم لا، فإنّه من الأفضل الاعتماد على المظهر الافتراضي لمُدخِل الملفات من أجل سهولة الاستخدام. لذلك كل ما علينا فعله هو إضافة class باسم "no-js" للعنصر <html> ومن ثم نستخدم الجافاسكربت لاستبداله بالاسم "js" وبهذه الطريقة نعرف إذا كان الجافاسكربت مفعلًا أم لا. <html class="no-js"> <head> <!-- remove this if you use Modernizr --> <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script> </head> </html>وهذه تنسيقات CSS: .js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .no-js .inputfile + label { display: none; } خطأ في متصفح Firefoxإنّه لمن المفاجئ معرفة أنّ متصفح Firefox يتجاهل input[type="file"]:focus بينما تعمل :hover و:active بشكل جيد. ولكن لحسن الحظ فإنّ هذا المتصفح يسمح لنا بالتعرف على حالة focus باستخدام الجافاسكربت، لذلك فإنّ الحل هو إضافة class للعنصر <input> ليسمح لنا بالتحكم بحالة الـfocus: input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });.inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } خاتمةإلى هنا نكون قد وصلنا إلى نهاية هذا الدرس. لذلك تأكد بأن تطلع على الشفرة المصدرية وعلى المعاينات وأن تقوم بالتعديل عليها لتتناسب مع احتياجاتك وذوقك. كما أنّ لديك الحرية الكاملة في استخدام الشفرات الموجودة في هذا الدرس في مشاريعك القادمة. ترجمة -وبتصرّف- للمقال Styling & Customizing File Inputs the Smart Way لصاحبته Osvaldas Valutis.