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

هشام رزق الله

الأعضاء
  • المساهمات

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

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

  • عدد الأيام التي تصدر بها

    31

كل منشورات العضو هشام رزق الله

  1. لا توجد فروق جوهرية بين الإصدارين فإذا تعلمت إحداهما يمكنك تعلم الآخر بكل السهولة. تمت إضافة العديد من المميزات الجديدة في CSS3 فأصبح بإمكانك إضافة العديد من التأثيرات الجديدة وتعديل الحدود (Borders) وتم إضافة مميزات جديدة إلى المحددات (Selectors) والتي من أبرزها العناصر الزائفة (pseudo-elements). المصدر
  2. يمكنك استخدام أي إطار يناسبك، أقترح عليك أن تستخدم Angular فهو من أفضل إطارات الجافاسكربت ويمكنك البدء في تعلم البرمجة باستخدام Angular من المقال التالي: الدليل الكامل لتعلم Angular JS في يوم واحد. تحياتي
  3. حسب ما فهمته من سؤالك أنك تريد تعطيل جميع Checkbox في صفحة معينة(أي أن جميع checkbox لا يمكن تغيير القيم الإفتراضية فيها). هذه شيفرة jquery تقوم بالمهمة: $(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { $("input.group1").removeAttr("disabled"); } else { $("input.group1").attr("disabled", true); } }ولقد قمت بإعطاء صنف class لكل checkbox، حيث أصبح كالتالي: <form action="demo_form.asp" method="get"> <input type="checkbox" name="vehicle" value="Bike" class="group1"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked class="group1"> I have a car<br> <input type="submit" value="Submit"> </form> المصدر تحياتي
  4. هذا مثال بالجافاسكربت: var divs = $('.social, .title'), limit = 35; /* scrolltop value when opacity should be 0 */ $(window).on('scroll', function() { var st = $(this).scrollTop(); /* avoid unnecessary call to jQuery function */ if (st <= limit) { divs.css({ 'opacity' : (1 - st/limit) }); } });حيث أن `.social` و `.title` هما وسمين div، وعندما يصل أعلى شريط التمرير (scrolltop) إلى 35px تقل الشفافية بقدار 1 - 35/35 = 0 وهذا مثال عملي المصدر تحياتي
  5. حتى الآن تعلمنا كيفية تثبيت وإعداد Laravel، بالإضافة إلى إعداد بعض المشاريع والمهام والموارد المضمّنة و عرضهم على المستخدم، كما أنشأنا وظائف الإنشاء والتعديل والحذف، وفي هذا الفصل سوف نختم الدرس عن طريق إضافة استمارة التحقق. استمارة التحقق من جانب الخادمعلى الرغم من أن استمارات الإنشاء والتعديل تعمل إلا أننا لم نقم بالتحقق من ما يتم إدخاله، وهذا ما سنقوم بعمله اليوم. هنالك طرق متعددة للتعامل مع استمارة التحقق، بعضها أفضل من الآخر، ولهذا التطبيق الصغير نقترح أن نستخدم وظيفة المتحكِّمات ()validate مع كائن Illuminate\Http\Request مثل هذا، في ملف app/Http/Controllers/ProjectsController.php/: // /app/Http/Controllers/ProjectsController.php use Illuminate\Http\Request; class ProjectsController extends Controller { protected $rules = [ 'name' => ['required', 'min:3'], 'slug' => ['required'], ]; /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return Response */ public function store(Request $request) { $this->validate($request, $this->rules); $input = Input::all(); Project::create( $input ); return Redirect::route('projects.index')->with('message', 'Project created'); } /** * Update the specified resource in storage. * * @param \App\Project $project * @param \Illuminate\Http\Request $request * @return Response */ public function update(Project $project, Request $request) { $this->validate($request, $this->rules); $input = array_except(Input::all(), '_method'); $project->update($input); return Redirect::route('projects.show', $project->slug)->with('message', 'Project updated.'); }وأما في ملف app/Http/Controllers/TasksController.php/: // /app/Http/Controllers/TasksController.php use Illuminate\Http\Request; class TasksController extends Controller { protected $rules = ['name' => ['required', 'min:3'], 'slug' => ['required'], 'description' => ['required'], ]; /** * Store a newly created resource in storage. * * @param \App\Project $project * @param \Illuminate\Http\Request $request * @return Response */ public function store(Project $project, Request $request) { $this->validate($request, $this->rules); $input = Input::all(); $input['project_id'] = $project->id; Task::create( $input ); return Redirect::route('projects.show', $project->slug)->with('Task created.'); } /** * Update the specified resource in storage. * * @param \App\Project $project * @param \App\Task $task * @param \Illuminate\Http\Request $request * @return Response */ public function update(Project $project, Task $task, Request $request) { $this->validate($request, $this->rules); $input = array_except(Input::all(), '_method'); $task->update($input); return Redirect::route('projects.tasks.show', [$project->slug, $task->slug])->with('message', 'Task updated.'); }سوف نحتاج أيضا إلى مكان لعرض أية أخطاء، لذلك قُم بفتح resources/views/app.blade.php/ وأضف السطور التالية أسفل ('yield('content@: <div class="content"> @if (Session::has('message')) <div class="flash alert-info"> <p>{{ Session::get('message') }}</p> </div> @endif @if ($errors->any()) <div class='flash alert-danger'> @foreach ( $errors->all() as $error ) <p>{{ $error }}</p> @endforeach </div> @endif @yield('content') </div>إذا أردت قائمة كاملة من قواعد التحقق، أنصحك بزيارة التوثيق الرسمي. من المفترض أن يعمل كل شيء الآن، وإذا كان عكس ذلك، فسوف تقوم ()this->validate$ بتوجيهك إلى الصفحة الحالية مع الأخطاء التي سوف تظهر على الصفحة. خاتمةلقد قمنا في هذه الدورة بتعلم الكثير من الأشياء حول Laravel، مثل كيفية تثبيت وإعداد Laravel 5 بالإضافة إلى بعض المفاهيم المتقدمة مثل الربط بين الطريق والنموذج route model binding والحماية من CSRF، وعلى الرغم من بساطة التطبيق الذي قمنا به إلا أنه بداية جيدة لكل من يريد احتراف Laravel. ترجمة -وبتصرّف- للمقال Creating a Basic ToDo Application in Laravel 5 – Part 4. حقوق الصورة البارزة: Designed by Freepik.
  6. حتى الآن تعلمنا كيفية تثبيت وإعداد Laravel، بالإضافة إلى أننا قمنا بـإعداد بعض موارد المشاريع والمهام وعرضهم للمستخدم. في هذا الدرس، سنتعلم كيفية إنشاء وتعديل وحذف الصفحات والإجراءات. إضافة روابط التصفحقبل أن نفعل أي شيء، سنقوم بإضافة روابط create/edit/delete/back إلى صفحات المشاريع والمهام: <!-- /resources/views/projects/index.blade.php --> @extends('app') @section('content') <h2>Projects</h2> @if ( !$projects->count() ) You have no projects @else <ul> @foreach( $projects as $project ) <li> {!! Form::open(array('class' => 'form-inline', 'method' => 'DELETE', 'route' => array('projects.destroy', $project->slug))) !!} <a href="{{ route('projects.show', $project->slug) }}">{{ $project->name }}</a> ( {!! link_to_route('projects.edit', 'Edit', array($project->slug), array('class' => 'btn btn-info')) !!}, {!! Form::submit('Delete', array('class' => 'btn btn-danger')) !!} ) {!! Form::close() !!} </li> @endforeach </ul> @endif <p> {!! link_to_route('projects.create', 'Create Project') !!} </p> @endsection <!-- /resources/views/projects/show.blade.php --> @extends('app') @section('content') <h2>{{ $project->name }}</h2> @if ( !$project->tasks->count() ) Your project has no tasks. @else <ul> @foreach( $project->tasks as $task ) <li> {!! Form::open(array('class' => 'form-inline', 'method' => 'DELETE', 'route' => array('projects.tasks.destroy', $project->slug, $task->slug))) !!} <a href="{{ route('projects.tasks.show', [$project->slug, $task->slug]) }}">{{ $task->name }}</a> ( {!! link_to_route('projects.tasks.edit', 'Edit', array($project->slug, $task->slug), array('class' => 'btn btn-info')) !!}, {!! Form::submit('Delete', array('class' => 'btn btn-danger')) !!} ) {!! Form::close() !!} </li> @endforeach </ul> @endif <p> {!! link_to_route('projects.index', 'Back to Projects') !!} | {!! link_to_route('projects.tasks.create', 'Create Task', $project->slug) !!} </p> @endsectionهذه الشفرة البرمجية مفهومة، الصعوبة تكمن في رابط الحذف، متحكِّمات الموارد تتطلب إرسال وظيفة HTTP DELETE، وهذا لا يمكن أن يتم مع رابط عادي، لذلك يتطلب نموذج يتم تقديمه إلى طريق route محدد. للمزيد من المعلومات قُم بزيارة إجراءات يتم التحكم بها عن طريق متحكِّمات الموارد. إنشاء صفحات الإضافة والتعديلبعد الانتهاء من صفحات عرض قائمة المشاريع، نحتاج إلى إمكانية إضافة وحذف المشاريع والمهام. استمارات الإضافة والحذف ستكون متشابهة كثيرا، لذلك بدلا من تكرارهم، سنقوم بوراثتهم من نموذج واحد. سوف نبدأ مع عروض create/edit للمشروع: <!-- /resources/views/projects/create.blade.php --> @extends('app') @section('content') <h2>Create Project</h2> {!! Form::model(new App\Project, ['route' => ['projects.store']]) !!} @include('projects/partials/_form', ['submit_text' => 'Create Project']) {!! Form::close() !!} @endsection <!-- /resources/views/projects/edit.blade.php --> @extends('app') @section('content') <h2>Edit Project</h2> {!! Form::model($project, ['method' => 'PATCH', 'route' => ['projects.update', $project->slug]]) !!} @include('projects/partials/_form', ['submit_text' => 'Edit Project']) {!! Form::close() !!} @endsectionقُم بعمل نفس الشيء مع المهام لكن لا تنسَ تحديث الطرق (routes): <!-- /resources/views/tasks/create.blade.php --> @extends('app') @section('content') <h2>Create Task for Project "{{ $project->name }}"</h2> {!! Form::model(new App\Task, ['route' => ['projects.tasks.store', $project->slug], 'class'=>'']) !!} @include('tasks/partials/_form', ['submit_text' => 'Create Task']) {!! Form::close() !!} @endsection <!-- /resources/views/tasks/edit.blade.php --> @extends('app') @section('content') <h2>Edit Task "{{ $task->name }}"</h2> {!! Form::model($task, ['method' => 'PATCH', 'route' => ['projects.tasks.update', $project->slug, $task->slug]]) !!} @include('tasks/partials/_form', ['submit_text' => 'Edit Task']) {!! Form::close() !!} @endsectionالآن توجد عدة مفاهيم جديدة: إضافة جزئيةالاستمارة تتطلب عدة وسوم، وبدلا من ذلك سنقوم بتقسيمها من جزئية _form ونضعها مباشرة في العرض، استمارة Add هي من نوع POST ترسل البيانات إلى طريق projects.store واستمارة Edit هي من نوع PATCH وترسل البيانات إلى projects.update. قد يبدوا هذا معقدا ومبهم لكن هذه هي الطريقة التي تعمل بها المتحكِّمات. لاحظ أننا استخدمنا ()Form::model، وتسمى هذه نموذج الاستمارة الملزمة و ليس لدى هذه أهمية كبيرة الآن، فهي تُستخدم للتعبئة التلقائية وسوف نحتاجها في وقت لاحقا عندما نضيف الحقول باستخدام ()Form::input.الحماية من CSRF:مساعدي الاستمارة (Form helpers) توفر العديد من الوظائف مجانا، فإذا ذهبت إلى projects/create/ ورأيت مصدر الصفحة ستجد شيئا مشابها لهذا: <form method="POST" action="http://l4todo.localhost.com/projects" accept-charset="UTF-8"> <input name="_token" type="hidden" value="Y8uOo7SeD5tQZExezDf5a7UwiYR4P6qIHEUKJNxI"> </form>هل ترى حقل token_ ؟ هذا هو الرمز المميز لـ CSRF مُنشئ تِلقائيا بواسطة استدعاء {{ ()Form::model }} الذي يمنع ثغرة CSRF. يكفي أن نقول أن هذا شيئ مفيد وأننا لم نقم بأي شيئ للحصول عليه. إنشاء استمارة التعديلنحن بحاجة إلى ترميز (markup) الاستمارة للمشاريع والمهام، وبفضل نموذج الاستمارة الملزمة يمكننا فقط استخدام مساعدي الاستمارة في Laravel لإخراج كافة الحقول التي نحتاجها. <!-- /resources/views/projects/partials/_form.blade.php --> <div class="form-group"> {!! Form::label('name', 'Name:') !!} {!! Form::text('name') !!} </div> <div class="form-group"> {!! Form::label('slug', 'Slug:') !!} {!! Form::text('slug') !!} </div> <div class="form-group"> {!! Form::submit($submit_text, ['class'=>'btn primary']) !!} </div> <!-- /resources/views/tasks/partials/_form.blade.php --> <div class="form-group"> {!! Form::label('name', 'Name:') !!} {!! Form::text('name') !!} </div> <div class="form-group"> {!! Form::label('slug', 'Slug:') !!} {!! Form::text('slug') !!} </div> <div class="form-group"> {!! Form::label('completed', 'Completed:') !!} {!! Form::checkbox('completed') !!} </div> <div class="form-group"> {!! Form::label('description', 'Description:') !!} {!! Form::textarea('description') !!} </div> <div class="form-group"> {!! Form::submit($submit_text) !!} </div>هذا كل شيئ، سوف تستطيع الأن التصفح في صفحات الإضافة والتعديل، الأمر كان سهلا للغاية. جعل الاستمارات تعمللدينا استمارات الإضافة والتعديل للمشروع و المهام، بالإضافة إلى استمارة مُضللة لحذفهم، الآن يجب علينا أن نجعلهم يعملون لأداء مهامهم. أولا، أضف هذا في أعلى المتحكِّمات: use Input; use Redirect;والآن لوظائف store و update و destroy: // ProjectsController public function store() { $input = Input::all(); Project::create( $input ); return Redirect::route('projects.index') ->with('message', 'Project created'); } public function update(Project $project) { $input = array_except(Input::all(), '_method'); $project->update($input); return Redirect::route('projects.show', $project->slug) ->with('message', 'Project updated.'); } public function destroy(Project $project) { $project->delete(); return Redirect::route('projects.index')->with('message', 'Project deleted.'); } // TasksController public function store(Project $project) { $input = Input::all(); $input['project_id'] = $project->id; Task::create( $input ); return Redirect::route('projects.show', $project->slug) ->with('message', 'Task created.'); } public function update(Project $project, Task $task) { $input = array_except(Input::all(), '_method'); $task->update($input); return Redirect::route('projects.tasks.show', [$project->slug, $task->slug]) ->with('message', 'Task updated.'); } public function destroy(Project $project, Task $task) { $task->delete(); return Redirect::route('projects.show', $project->slug)->with('message', 'Task deleted.'); }الشفرة البرمجية في الأعلى مفهومة ولا داعي لشرحها. إذا قمت الآن بتقديم إحدى الاستمارات فسوف تحصل على خطأ MassAssignmentException: _token، فالإحالة الكتلية تحدث عندما تقوم بتمرير مصفوفة بيانات إلى ()Model::create أو ()Model::update من المتحكِّمات بدل من وضع حقل واحد في نفس الوقت، ولإصلاح هذا، قم ببساطة بإضافة خاصية guarded إلى كل نموذج. class Project extends Model { protected $guarded = []; class Task extends Model { protected $guarded = [];رسائل الفلاشسوف تلاحظ من الشفرة السابقة أننا استخدمنا دالة ()with، وهذه الدالة تقوم بتمرير متغير فلاش (يستخدم لمرة واحدة) للجلسة session والتي يمكن قراءتها عند تحميل الصفحة التالية. والآن نحتاج إلى التأكد من تلك الرسالة وعرضها على المستخدم. قُم بفتح resources/views/app.blade.php/ وأضف التالي: ... <div class="content"> @if (Session::has('message')) <div class="flash alert-info"> <p>{{ Session::get('message') }}</p> </div> @endif @yield('content') </div> ...حاول إنشاء مشروع، هذه الرسالة ستظهر مهما حدّثت الصفحة وستذهب بعد فترة. خاتمةاليوم قمنا بأشياء مثيرة للغاية، فلقد أضفنا استمارات الإضافة والتعديل والحذف وتعلمنا حول CSRF و نموذج الاستمارة الملزمة بالإضافة إلى تعلمنا المزيد حول blade و الدوال. كل شيئ الآن يعمل، يمكن تجربة التطبيق وإنشاء وتعديل وحذف المهام والمشاريع، وفي أي وقت يمكنك كتابة الأمر: php artisan migrate:refresh –seed وسوف يتم إعادة تعيين قواعد البيانات. في المرحلة القادمة والتي ستكون النهائية سوف نقوم بالتحقق من الاستمارات. ترجمة -وبتصرّف- للمقال Creating a Basic ToDo Application in Laravel 5 – Part 3. حقوق الصورة البارزة: Designed by Freepik.
  7. بعد أن انتهينا من إعداد قواعد البيانات والطرق (routes)، سوف نتحدث في هذا الجزء عن المتحكِّمات (Controllers)، النماذج (مع العلاقات)، والعروض views. (بما في ذلك نظام blade ومخططات المحتوى). مساعدات النماذج Form Helpers في Laravelبعد كل هذه الإعدادات، إذا ذهبنا الآن (في المتصفح) إلى projects/ فسوف نحصل على صفحة فارغة فما هو السبب؟ حسنا، لنكتشف ذلك، قم بتنفيذ الأمر php artisan route:list على سطر الأوامر مرة أخرى وأنظر إلى هذا السطر: +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+ | | GET|HEAD | projects | projects.index | App\Http\Controllers\ProjectsController@index | | +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+يبدو أن رابط projects/ يقوم بتحميل الوظيفة Index الخاصة بـ ProjectsController، لذلك سنقوم بفتح app/Http/controllers/ProjectsController.php/ وسنقوم بتحديث التابع (method) لنقوم بربطه إلى عرض سوف نقوم بإنشائه. قم بإضافة السطر ;('return view('projects.index إلى الوظيفة ()index كالتالي: public function index() { return view('projects.index'); }بما أننا نستخدم في هذا الدرس نظام Blade للقَوْلَبة سنقوم بإنشاء ملف resources/views/projects/index.blade.php/ وسنكتب نص قصير داخله، ثم سنقوم مرة أخرى بالذهاب إلى projects/ في المتصفح، إذا كان كل شيء يعمل جيدا فسوف تجد النص الذي كتبته بالأعلى. والآن قُم بنفس الشيء لتابع المتحكِّم create عن طريق إضافة السطر ;('return view('projects.create إلى التابع ()create كالتالي: public function create() { return view('projects.create'); }إن إظهار محتويات العرض view هو أمر رائع، لكن ماذا لو كنا نملك أكثر من صفحة واحدة في موقعنا ؟ في هذه الحالة، سوف نحتاج إلى قالب ثابت لجميع الصفحات، أي أننا نحتاج إلى عرض محتويات العرض view داخل قالب HTML بسيط، وسنقوم بهذا عن طريق مخططات المتحكِّمات. من أجل عمل مخططات المتحكِّمات سنقوم بالخطوات التالية: إنشاء مخطط العرض، وبما أن Laravel توفر لنا واحدة جيدة تدعى app.blade.php لذلك سنوفر الوقت وسنقوم بإستخدامها. لاحظ أن قرب أسفل المخطط هنالك سطر ('@yield('content وهذه دالة ستقوم بتحميل محتوانا الحالي.الإشارة إلى مخططك في عرضك view باستخدام ('extends('app@ ولفها عن طريق كتلة ('section('content@، مثل التالي: @extends('app') @section('content') This is my /resources/views/projects/index.blade.php file! @endsection سنقوم الآن بتنفيذ هذه الخطوات بإنشاء عروض show.blade.php و create.blade.php و index.blade.php في مجلد resources/views/projects/ مع الشيفرات (markup) المذكورة أعلاه وقُم بتغيير اسم الملف إذا كان الأمر ضروريا، ثم قُم بعمل تحديث للصفحة projects/ في متصفحك، وسوف ترى هيكل app.blade.php حول محتويات عرضك (view). الربط بين الطريق (route) والنموذجسيوفر Laravel بشكل افتراضي معرف رقمي ID للعديد من توابع متحكِّمات الموارد مثل ()show و ()edit و ()update و ()destroy، وهذا الأمر سيضيف العديد من الشيفرات الجاهزة (boilerplate) التي نحتاج إلى كتابتها، مثل الحصول على مثيل النموذج والتأكد من وجودها وغيرها. ولهذا سوف نستخدم إحدى مميزات Laravel والتي تدعى الربط بين الطريق و النموذج route model binding، فبدل من توفير متغير id$، سوف نقوم بإعطاء الوظيفة (method) كائن project$ أو task$. قُم بفتح app/Http/routes.php/ وأضف هذين السطرين (أول سطرين بعد التعليق): // Provide controller methods with object instead of ID Route::model('tasks', 'Task'); Route::model('projects', 'Project'); // Use slugs rather than IDs in URLs Route::bind('tasks', function($value, $route) { return App\Task::whereSlug($value)->first(); }); Route::bind('projects', function($value, $route) { return App\Project::whereSlug($value)->first(); }); Route::resource('projects', 'ProjectsController'); Route::resource('projects.tasks', 'TasksController'); وفي TasksController و ProjectsController (ملفات app/Http/Controllers/ProjectsController.php/ و app/Http/Controllers/TasksController.php/) قُم باستبدال كل وظيفة (method) مُعرف بمرجع id$ بـ task$ أو project$ مثل التالي: // public function edit($id) public function edit(Project $project)لا تنسَ إضافة use App\Task و use App\Project في أعلى المتحكِّمات حتى نشير إلى هذه النماذج. لا تقلق إذا لم تفهم هذه التغييرات، فسنقوم بعرض الشيفرة البرمجة الكاملة لـ TasksController و ProjectsController لاحقا. وفي هذه المرحلة يمكنك تمرير الكائن (object) إلى عرضه في كل متحكِّم لوظيفة (method) الإظهار والتعديل والتحديث حتى نستطيع استخدامهم لاحقا: public function edit(Project $project) { return view('projects.show', compact('project')); }سوف يحتاج TasksController إلى بضعة تعديلات طفيفة أخرى، وبما أننا نستخدم الموارد المضمّنة nested resources، سيخبرنا php artisan route:list أن جميع طرق task تحتوي على قناع {projects} بالإضافة إلى أن بعضها يستقبل قناع {tasks} أيضا. و كنتيجة لذلك، سيتم تمرير مثيل Project كمُعامل أول لتوابع المتحكِّمات (controller methods)، لذلك قُم بتحديثها وقٌم بتمرير متغير project$ الجديد. إذا لم تفهم خطوات الإضافة لـ TasksController و ProjectsController فهذه هي الشيفرة الكاملة للملفين بعد كل التعديلات: // /app/Http/Controllers/ProjectsController.php <?php namespace App\Http\Controllers; use App\Project; use App\Http\Requests; use App\Http\Controllers\Controller; use Illuminate\Http\Request; class ProjectsController extends Controller { /** * Display a listing of the resource. * * @return Response */ public function index() { $projects = Project::all(); return view('projects.index', compact('projects')); } /** * Show the form for creating a new resource. * * @return Response */ public function create() { return view('projects.create'); } /** * Store a newly created resource in storage. * * @return Response */ public function store() { // } /** * Display the specified resource. * * @param \App\Project $project * @return Response */ public function show(Project $project) { return view('projects.show', compact('project')); } /** * Show the form for editing the specified resource. * * @param \App\Project $project * @return Response */ public function edit(Project $project) { return view('projects.edit', compact('project')); } /** * Update the specified resource in storage. * * @param \App\Project $project * @return Response */ public function update(Project $project) { // } /** * Remove the specified resource from storage. * * @param \App\Project $project * @return Response */ public function destroy(Project $project) { // } } // /app/Http/Controllers/TasksController.php <?php namespace App\Http\Controllers; use App\Project; use App\Task; use App\Http\Requests; use App\Http\Controllers\Controller; use Illuminate\Http\Request; class TasksController extends Controller { /** * Display a listing of the resource. * * @param \App\Project $project * @return Response */ public function index(Project $project) { return view('tasks.index', compact('project')); } /** * Show the form for creating a new resource. * * @param \App\Project $project * @return Response */ public function create(Project $project) { return view('tasks.create', compact('project')); } /** * Store a newly created resource in storage. * * @param \App\Project $project * @return Response */ public function store(Project $project) { // } /** * Display the specified resource. * * @param \App\Project $project * @param \App\Task $task * @return Response */ public function show(Project $project, Task $task) { return view('tasks.show', compact('project', 'task')); } /** * Show the form for editing the specified resource. * * @param \App\Project $project * @param \App\Task $task * @return Response */ public function edit(Project $project, Task $task) { return view('tasks.edit', compact('project', 'task')); } /** * Update the specified resource in storage. * * @param \App\Project $project * @param \App\Task $task * @return Response */ public function update(Project $project, Task $task) { // } /** * Remove the specified resource from storage. * * @param \App\Project $project * @param \App\Task $task * @return Response */ public function destroy(Project $project, Task $task) { // } }لاحظ أنه إذا قمت بتحديث صفحة projects/project-1/ سيبقى كل شيء يعمل. عرض نماذجناصفحة عرض قائمة المشاريع، حان الآن وقت البدء بعرض المشاريع والمهام، قٌم بفتح projects/ في متصفحك. وبالاعتماد على php artisan route:list، ستكون هذه الصفحة هي صفحة عرض المشاريع، لذلك قُم بفتح resources/views/projects/index.blade.php/ وأضف التالي: @extends('app') @section('content') <h2>Projects</h2> @if ( !$projects->count() ) You have no projects @else <ul> @foreach( $projects as $project ) <li><a href="{{ route('projects.show', $project->slug) }}">{{ $project->name }}</a></li> @endforeach </ul> @endif @endsectionسوف أشرح بعض النقاط في هذه الشفرة البرمجية: استخدمنا في هذه الشفرة لغة Blade للقَوْلَبة، لذلك فإن if و foreach تتحكم في تدفق flow الدوال بإضافة إلى أنها دالة طباعة (الأقواس المعقوفة المزدوجة).تأكدنا إن كان هنالك أي مشروع لعرضه، إن كان هنالك أية مشاريع فسيقوم بعرضها وإن لم يكن تظهر رسالة تخبرك بذلك.استدعينا مساعد ()route مع طريق ذا اسم (يمكنك رؤية قائمة الطرق ذات الاسم عن طريق php artisan route:list) لربط كل مشروع مع صفحة تفاصيله.سوف تحتاج أيضا إلى تمرير متغير projects$ لهذا العرض view وإلا ستحصل على خطأ متغير غير معرف undefined variable error. قُم بفتح app/Http/controllers/ProjectsController.php/ وقُم بتحديث الوظيفة ()index إلى: public function index() { $projects = Project::all(); return view('projects.index', compact('projects')); }قُم بتحديث الصفحة (Refresh) وستجد قائمة من مشاريعك. علاقات النموذج - صفحة تفاصيل المشروعفي صفحة تفاصيل المشروع نحتاج إلى عرض قائمة من مهام المشاريع، وللقيام بذلك نحتاج إلى تعريف علاقة "واحد إلى الكثير one-to-many" في نموذج Project للسماح له بالحصول على المهام tasks. قُم بفتح app/Project.php/ وأضف التابع ()tasks كالتالي: public function tasks() { return $this->hasMany('App\Task'); }بشكل عكسي، يمكننا إضافة علاقة "الكثير إلى واحد many-to-one" لنموذج المهام Task: public function project() { return $this->belongsTo('App\Project'); }للتأكد من أنها تعمل اكتب الأمر: $ php artisan tinkerوستكون النّتيجة كالتي حسب المدخلات: >App\Project::whereSlug('project-1')->first()->tasks->count(); 5 >App\Project::whereSlug('project-2')->first()->tasks->count(); 2 >App\Task::first()->project->name; Project 1ممتاز، يمكننا الآن تحديث عرض resources/views/projects/show.blade.php/: @extends('app') @section('content') <h2>{{ $project->name }}</h2> @if ( !$project->tasks->count() ) Your project has no tasks. @else <ul> @foreach( $project->tasks as $task ) <li><a href="{{ route('projects.tasks.show', [$project->slug, $task->slug]) }}">{{ $task->name }}</a></li> @endforeach </ul> @endif @endsectionاضغط على أي مشروع في صفحة عرض قائمة المشاريع في متصفحك وسوف يتم عرض المشروع مع جميع المهام المرتبطة به. وأخير تَبقى لدينا صفحة عرض المهام (resources/views/tasks/show.blade.php/)، وهذه سهلة للغاية: @extends('app') @section('content') <h2> {!! link_to_route('projects.show', $project->name, [$project->slug]) !!} - {{ $task->name }} </h2> {{ $task->description }} @endsectionملاحظة: كُن حذرا عندما تستخدم علاقات النماذج (models)، فإنه من السهل إنشاء عدد كبير من استعلامات SQL، وتسمى هذه المشكلة بـ "مشكلة N+1". الخاتمةاليوم تعلمنا الكثير من الأشياء الجديدة مثل: الربط بين الطريق (route) و النموذجالنماذج (مع علاقة واحد إلى الكثير one-to-many)المتحكِّمات (مع الربط بين الطريق و النموذج)العروض (مع لغة blade للقَوْلَبة والمخططات)أصبحت الصفحة تعرض لنا قائمة من المشاريع والمهام، وفي الدرس القادم سوف نركز على تعديل وإضافة وحذف المشاريع والمهام. ترجمة -وبتصرّف- للمقال Creating a Basic ToDo Application in Laravel 5 – Part 2. حقوق الصورة البارزة: Designed by Freepik.
  8. واحد من أكثر الأشياء المفيدة في ووردبريس ما يسمى بالوسوم الشرطية (Conditional Tags)، حيث ستمكنك من البرمجة بسهولة وفهم الكود الذي تكتبه كأنك تقرأ نص باللغة الإنجليزية. سنقوم في هذا الدرس بدراسة طريقة عمل الوسوم الشرطية مع إيضاح بعض النقاط الخفية والمبهمة مع قائمة بأكثر الوسوم الشرطية المفيدة وسنختم ببعض الأمثلة إن شاء الله. كيف تعمل الوسوم الشرطيةالوسوم الشرطية هي دوال خاصة بووردبريس تقوم بإرجاع قيمة صح أو خطأ (boolean) إعتمادا على معطيات مختلفة. يوجد حوالي 50 وسما شرطيا في ووردبريس، ولذلك سنقوم باختيار أكثرها استعمالا وأكثرها جديرة بالاهتمام وإلا سوف تسبب لنا الكثير من التعقيد. مفيدة()is_single سيتم إرجاع قيمة صحيحة إذا كانت الصفحة الحالية متكونة من تدوينة واحدة فقط من أي نوع ماعدا التدوينة مع المرفقات. ويتم ذلك عن طريق تمرير رقم التدوينة أو عنوانها كمعامل (parameter).()is_page سيتم إرجاع قيمة صحيحة إذا كانت الصفحة معروضة (غير مخفية).()is_singular مشابهة لـ ()is_single، لكنها تعود بقيمة صحيحة إذا تم عرض تدوينة تحتوي على مرفقات، وهي مشابهة لـ ()is_single() || is_page() || is_attachment حيث أن || تعني "أو".()is_archive سيتم إرجاع قيمة صحيحة إذا كانت الصفحة الحالية عبارة عن أرشيف مهما كان نوعها.()is_main_query سيتم إرجاع قيمة صحيحة إذا كان الاستعلام الحالي هو الاستعلام الرئيسي لهذه الصفحة.مبهمة ومخادعة()is_admin سيتم إرجاع قيمة صحيحة إذا كُنت في منطقة الإدارة من موقع ووردبريس، بعض الأشخاص يعتقد أن هذا الوسم لمعرفة هل المستخدم الحالي من المدراء أم لا، وهذا الأمر خاطئ.()is_dynamic_sidebar سيتم إرجاع قيمة صحيحة إذا كان الشريط الجانبي الحالي (ويدجت أو مناطق) لديه أية ودجات مفعلة.()is_home هذا الوسم مربك قليلا، سوف تعتقد للوهلة الأولى أنه لمعرفة هل أنت في الصفحة الرئيسية أم لا مثل http://www.example.com. لكن هذا ليس صحيح لأن هذا الوسم لمعرفة هل أنت في صفحة الرئيسية للتدوينات أم لا لأنه في بعض الأحيان قد تكون الصفحة الرئيسية للموقع ليس هي نفسها للتدوينات.()is_front_page سيتم إرجاع قيمة صحيحة إذا كانت الصفحة التي أنت فيها هي الصفحة الرئيسية سواء أن كانت هي نفسها للتدوينات أو صفحة تابعة للمدونة.قمنا بعرض جزء فقط من الوسوم الشرطية، إذا أردت المزيد يمكنك زيارة القائمة الكاملة. بعض الإستخدامات للوسوم الشرطية في ووردبريسهنالك الكثير من الإستخدامات للوسوم الشرطية وسنقوم الآن باستعراض أشهرها وأكثرها استعمالا. استخدام الوسوم الشرطية في القوالبتستخدم الوسوم الشرطية بكثرة في تطوير القوالب، ففي بعض الأحيان هنالك عنصر يظهر في كل الصفحات لكن هنالك حالات أو صفحات لا تريد أن يظهر بها. على سبيل المثال، لنقل أنك لا تريد أن يظهر التاريخ على الصفحات لكنك تريده أي يظهر على جميع التدوينات، فيمكنك القيام بهذا عن طريق هذه الشِفرة: /* الوسط: داخل ملف single.php */ <?php if ( ! is_page() ): ?> <span class="meta-date"> <?php the_date(); ?> </span> <?php endif; ?>ملاحظة حول الوسوم الشرطية والقالب الهرميإن القالب الهرمي مشابه بالأساس لـشجرة القرار التي يمكنك بناؤها باستعمال الوسوم الشرطية. ويمكنك أيضا وضع كامل القالب في index.php واستخدام هذه الوسوم لعمل ما يعمله القالب الهرمي. في الحقيقة فعل هذا الأمر ليست فكرة فريدة وجيدة، لكن معرفة أن هذا ممكن ومحاولة استعمال الوسوم الشرطية والقالب الهرمي سوف يساعدك على فهم الإثنين معا حسب رأيي. ولفهم هذا الأمر أكثر أنظر لهذا المخطط: إدراج ورقة أنماط خاصة أو ملفات جافا سكريبتفي بعض الأحيان سوف تحتاج إلى صنع صفحة مخصصة في موقعك بها الكثير من التأثيرات و الخصائص، ولتحقيق هذا سوف تحتاج إلى الكثير من التأثيرات والسكريبات والتي يجب أن تكون في صفحة واحدة فقط لأن تحميل كل هذه التأثيرات والسكريبات في جميع صفحات الموقع سوف يزيد من حجمه ويجعله أبطأ، ويمكن القيام بذلك عن طريق الوسوم الشرطية كما في المثال: add_action( 'wp_enqueue_scripts', 'wpshout_special_page' ); function wpshout_special_page() { if ( is_page( 'special-page' ) ) { wp_enqueue_script( 'special_js', get_stylesheet_directory_uri().'/special.js' ); wp_enqueue_style( 'special_css', get_stylesheet_directory_uri().'/special.css' ); } }هنا قمنا بعمل إدراج بشكل عادي، لكننا قمنا بربط عملية الإدراج بشرط: إذا لم تكن الصفحة الحالية "صفحتنا الخاصة"، التأثيرات وأوراق الأنماط و السكريبتات لن يتم تحميلها. لاحظ أن ()is_page ستقوم باختبارين: الأول للتأكد من أن المشاركة من نوع صفحة.والثاني هل لصفحة special-page اسم للطيف، معناها هل هي slug ؟ ويقصد بها أن الرابط يحتوي على عنوان الصفحة مثلا في هذا الرابط، سيكون slug هو wordpress-203. ولاختبار هذا قمنا بتمرير 'special-page' إلى ()is_page كمعامل.إن التأكد من هذين الشرطين يجعلنا نرفض وضع السكريبتات وأوراق الأنماط سوى لصفحة واحدة مخصصة. ()is_admin يمكن استخدامه أيضا فهو حالة أخرى حيث تحتاج الإضافات للقيام بعمليات اختبار مماثلة. ملاحظة عن الوسوم الشرطية والحالة العامةالوسوم الشرطية تستطيع الوصول إلى الحالة العامة (Global State) لووردبريس (طريقة عمل الأشياء في الخلفية) وهذه الحالة يجب أن يتم وضعها قبل أن تستطيع استخدامها، لكن لا يمكنك الاعتماد كليا على استعمال الوسوم الشرطية حتى تتأكد أن عملية المصنع الخاصة بووردبريس قد فعّلت الإجراء (action) المسمى posts_selection. (هنا لائحة الكاملة بالإجراءات المفعلة من قبل ووردبريس وترتيبها). هذا يعني أن بعض الإجراءات التي يتم استخدامها عادة لا يمكن استخدامها بالتوازي مع الوسوم الشرطية، ومن أشهر هذه الإجراءات: setup_theme، init، register_sidebar و pre_get_posts. ومع ذلك، حوالي نصف الخُطّافات (hooks) وجميع القوالب تعمل جيدا بعد أن يتم تحميل الوسوم الخاصة بالقوالب، وسوف تكون مفيدة جدا هناك. في أغلب الوقت لن تكون هذه مشكلة لك، لكنه من الجيدة أن تعرف ما يمكنك فعله وما لا يمكنك، فهذا الأمر لن يزعجك سوى لمرة واحدة في كل 50 مرة تستخدم فيها الوسوم الشرطية. الوسوم الشرطية: تعلمها، استخدمها، وأحبهاإن الدوال الشرطية لووردبريس واضحة للغاية و مفيدة جدا و تستعمل في كل مكان، وآمل أن تستخدمها وأن تكون مفيدة لك في جميع الحالات عندما تحتاجها و تتحدث مع نفسك مثل : "نعم، أريد فعل هذا لكن ليس في هذه الحالة ..." أو "لكن أريدها فقط أن تظهر عندما ..." وغيرها، وسوف تبرز لك قوة ووردبريس كما هي. ترجمة وبتصرف للمقال: WordPress’s Conditional Tags لصاحبه David Hayes.
  9. يعتبر Laravel أشهر إطار ويب بلغة PHP، ولقد شهد إصداره الخامس العديد من التغييرات وتمت إضافة الكثير من المميزات الجديدة، ولذلك لتعلم أساسيات هذا الإطار سوف نقوم بإنشاء تطبيق Todo List، وسوف نتعلم من خلال هذا التطبيق الكثير من المفاهيم والطرق البرمجية حتى نتمكن من التعامل والتوسع مع إطار Laravel 5. ملاحظة: هذا الدرس طويل للغاية لذلك سوف يتم تقسيمه إلى أجزاء أصغر، ويمكنك الحصول على الكود المصدري لكل جزء من GitHub. في هذا الدرس سوف نتحدث عن تثبيت Laravel 5 وإعداده وعن بعض التقنيات الجديد كالتهجير migration والبذر seeding. قبل أن نبدأ أهم المصطلحات التي ستصادفنا في هذه الدروس: التهجير migration: نظام لإدارة قواعد البيانات، فهو يسمح للفريق بتعديل مخطط قواعد البيانات لجميع الأعضاء. البذر seeding: يقصد بها إدخال البيانات الأولية لتجربة التطبيق، أي أنه سيقوم بإدخال بيانات لمساعدتك على التطوير واكتشاف الأخطاء. هدف المشروع سوف يتكون تطبيقنا من مشروع أو أكثر، كل واحد لديه قائمة مهام خاصة به، وسوف تتمكن من إنشاء وعرض وتعديل وحذف المهام والمشاريع. في هذا الدرس سوف نقوم بـ: إعداد وتنصيب Laravel. تركيب حزم إضافية لتسهيل عملية التطوير. استخدام التهجير migration والبذر seeds. تعلم كيفية استخدام متحكِّمات الموارد resourceful controllers. تعلم كيفية استخدام العروض views. (بما في ذلك نظام blade ومخططات المحتوى) التعامل مع علاقات النماذج. التثبيت إن عملية تثبيت Laravel سهلة للغاية بفضل Composer، لذلك سوف نستخدمه في تثبيته. استخدام Composer والآن نقوم بتشغيل مثبت Laravel (سوف تحتاج إلى عمل هذا لمرة واحدة فقط): composer global require "laravel/installer=~1.1" والآن نقوم بعمل مشروعنا: laravel new l5todo الإعداد يستخدم Laravel 5 حزمة تدعى DotEnv تقوم بتخزين المعلومات الحساسة في ملفات ذات صيغة .env والتي يتم تحميلها كمتغيرات PHP عند التشغيل. قد يبدوا لك هذا معقدا لكن بكلمات أخرى، هذا يعني أن فقط الإعدادات الحسّاسة credentials يتم تخزينها في هذه الملفات وأما بقية إعداداتك فيتم تخزينها في ملفات الإعداد العادية. قاعدة البيانات سوف نحتاج إلى قاعدة بيانات، لذلك سنقوم بعمل واحدة ثم سنقوم بنسخ .env.example إلى .env وتحديث البيانات على الشكل التالي: DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret في النهاية إذا لم تكن تستخدم MySQL فقُم بفتح config/database.php/ ثم قٌم بتغيير السطر الافتراضي: 'default' => 'mysql', تذكر أن تضيف ملفات بيئة عملك إلى .gitignore عن طريق إضافة سطر .env. خطواتنا الأولى كما ذكرنا في الأعلى، سوف يتكون تطبيق قائمة المهام على مشروع أو أكثر كل واحد مع قائمة المهام الخاصة به، ولذلك سوف نحتاج إلى مشروع، نماذج مهام، متحكِّمات، عروض views، التهجير migration، البذور seeds والطرق routes، ولقد قمنا بشرح بعض هذه المصطلحات في بداية الدرس. لنبدأ بالتعامل معهم كل واحد على حدة. التهجير migration أولا نريد أن نرى مخطط جدولنا، سوف يبدو مثل هذا: Projects +------------+------------------+------+-----+ | Field | Type | Null | Key | +------------+------------------+------+-----+ | id | int(10) unsigned | NO | PRI | | name | varchar(255) | NO | | | slug | varchar(255) | NO | | | created_at | timestamp | NO | | | updated_at | timestamp | NO | | +------------+------------------+------+-----+ Tasks +-------------+------------------+------+-----+ | Field | Type | Null | Key | +-------------+------------------+------+-----+ | id | int(10) unsigned | NO | PRI | | project_id | int(10) unsigned | NO | MUL | | name | varchar(255) | NO | | | slug | varchar(255) | NO | | | completed | tinyint(1) | NO | | | description | text | NO | | | created_at | timestamp | NO | | | updated_at | timestamp | NO | | +-------------+------------------+------+-----+ ثم سوف نقوم بعمل التهجير migration: php artisan make:migration create_projects_and_tasks_tables --create="projects" سوف نقوم بعمل كِلا الجدولين بتهجير migration واحد حتى نتمكن من حذفها بترتيب عكسي لتجنب سلامة خرق القيد integrity constraint violation، قُم بفتح: /database/migrations/createprojectsandtasks_tables.php وقُم بتحديث المعلومات حسب الآتي: <?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateProjectsAndTasksTables extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('projects', function(Blueprint $table) { $table->increments('id'); $table->string('name')->default(''); $table->string('slug')->default(''); $table->timestamps(); }); Schema::create('tasks', function(Blueprint $table) { $table->increments('id'); $table->integer('project_id')->unsigned()->default(0); $table->foreign('project_id')->references('id')->on('projects')->onDelete('cascade'); $table->string('name')->default(''); $table->string('slug')->default(''); $table->boolean('completed')->default(false); $table->text('description')->default(''); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('tasks'); Schema::drop('projects'); } } قم بتنفيذ الهجرة migration: php artisan migrate إذا قمت الآن بمراجعة قاعدة البيانات، يجب أن تكون الجداول مكتملة. البذور Seeds سوف نحتاج إلى بذر المشاريع/المهام ليكون لديك شيء للعمل معه عندما نصل إلى المتصفح، لذلك قم بإنشاء: /database/seeds/ProjectsTableSeeder.php و TasksTableSeeder.php كالتالي: // /database/migrations/seeds/ProjectsTableSeeder.php <?php use Illuminate\Database\Seeder; class ProjectsTableSeeder extends Seeder { public function run() { // Uncomment the below to wipe the table clean before populating DB::table('projects')->delete(); $projects = array( ['id' => 1, 'name' => 'Project 1', 'slug' => 'project-1', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 2, 'name' => 'Project 2', 'slug' => 'project-2', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 3, 'name' => 'Project 3', 'slug' => 'project-3', 'created_at' => new DateTime, 'updated_at' => new DateTime], ); // Uncomment the below to run the seeder DB::table('projects')->insert($projects); } } // /database/migrations/seeds/TasksTableSeeder.php <?php use Illuminate\Database\Seeder; class TasksTableSeeder extends Seeder { public function run() { // Uncomment the below to wipe the table clean before populating DB::table('tasks')->delete(); $tasks = array( ['id' => 1, 'name' => 'Task 1', 'slug' => 'task-1', 'project_id' => 1, 'completed' => false, 'description' => 'My first task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 2, 'name' => 'Task 2', 'slug' => 'task-2', 'project_id' => 1, 'completed' => false, 'description' => 'My first task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 3, 'name' => 'Task 3', 'slug' => 'task-3', 'project_id' => 1, 'completed' => false, 'description' => 'My first task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 4, 'name' => 'Task 4', 'slug' => 'task-4', 'project_id' => 1, 'completed' => true, 'description' => 'My second task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 5, 'name' => 'Task 5', 'slug' => 'task-5', 'project_id' => 1, 'completed' => true, 'description' => 'My third task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 6, 'name' => 'Task 6', 'slug' => 'task-6', 'project_id' => 2, 'completed' => true, 'description' => 'My fourth task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ['id' => 7, 'name' => 'Task 7', 'slug' => 'task-7', 'project_id' => 2, 'completed' => false, 'description' => 'My fifth task', 'created_at' => new DateTime, 'updated_at' => new DateTime], ); //// Uncomment the below to run the seeder DB::table('tasks')->insert($tasks); } } ولا تنسَ إضافة أصناف البذور(seed classes) إلى database/seeds/DatabaseSeeder.php/ : use Illuminate\Database\Seeder; use Illuminate\Database\Eloquent\Model; class DatabaseSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { Model::unguard(); $this->call('ProjectsTableSeeder'); $this->call('TasksTableSeeder'); } } الآن نقوم بالبذر: composer dump-autoload ثم: php artisan db:seed # أو php artisan migrate:refresh --seed يجب الآن أن تكون قاعدة البيانات قد تم بذرها. mysql> select * from projects; +----+-----------+-----------+---------------------+---------------------+ | id | name | slug | created_at | updated_at | +----+-----------+-----------+---------------------+---------------------+ | 1 | Project 1 | project-1 | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | | 2 | Project 2 | project-2 | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | | 3 | Project 3 | project-3 | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | +----+-----------+-----------+---------------------+---------------------+ mysql> select * from tasks; +----+------------+--------+--------+-----------+----------------+---------------------+---------------+ | id | project_id | name | slug | completed | description | created_at | updated_at | +----+------------+--------+--------+-----------+----------------+---------------------+---------------+ | 1 | 1 | Task 1 | task-1 | 0 | My first task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 2 | 1 | Task 2 | task-2 | 0 | My first task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 3 | 1 | Task 3 | task-3 | 0 | My first task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 4 | 1 | Task 4 | task-4 | 1 | My second task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 5 | 1 | Task 5 | task-5 | 1 | My third task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 6 | 2 | Task 6 | task-6 | 1 | My fourth task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 | 7 | 2 | Task 7 | task-7 | 0 | My fifth task | 2015-02-05 01:25:43 | 2015-02-05 01:25:43 +----+------------+--------+--------+-----------+----------------+---------------------+---------------+ النماذج Models للعمل مع جداول المشاريع والمهام نحتاج إلى نماذج مماثلة، سوف نقوم بإنشائها الآن: php artisan make:model Project php artisan make:model Task كان هذا سهلا استخدام Artisan – Tinker الآن لدينا المعلومات في قاعدة البيانات وسيكون من الرائع أن نتعلم حول واحدة من أهم ميزات artisan وهي Tinker الذي يوفر لك سطر أوامر للتعامل مع Laravel، وكمثال، لنستخدمه في معرفة عدد المشاريع في قاعدة البيانات الحالية: $ php artisan tinker > App\Project::count(); 3 > App\Task::count(); 7 وكما ترى يمكن أن يكون Tinker مفيدا للغاية، لذلك سوف نستخدمه عدة مرات في هذه السّلسلة. المُتحكِّمات Controllers الآن وصلنا إلى النقطة التي سوف نبدأ بعرض ما صنعناه على المتصفح، وسوف نحتاج إلى إنشاء بعض المتحكِّمات Controllers والطرق Routes. سنبدأ أولا بالمتحكِّمات: php artisan make:controller ProjectsController php artisan make:controller TasksController الموارد المُضمّنة نبدأ بإضافة موارد Project و Task إلى app/Http/routes.php/ : Route::get('/', 'WelcomeController@index'); //Route::get('home', 'HomeController@index'); // //Route::controllers([ // 'auth' => 'Auth\AuthController', // 'password' => 'Auth\PasswordController', //]); Route::resource('projects', 'ProjectsController');Route::resource('tasks', 'TasksController'); والآن دعونا نرى إحدى مميزات artisan والمُتمثّلة في route:list، في سطر الأوامر أكتب التالي: php artisan route:list لتكون النّتيجة +--------+----------+--------------------------+------------------+-------------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+--------------------------+------------------+-------------------------------------------------+------------+ | | GET|HEAD | / | | App\Http\Controllers\WelcomeController@index | | | | GET|HEAD | projects | projects.index | App\Http\Controllers\ProjectsController@index | | | | GET|HEAD | projects/create | projects.create | App\Http\Controllers\ProjectsController@create | | | | POST | projects | projects.store | App\Http\Controllers\ProjectsController@store | | | | GET|HEAD | projects/{projects} | projects.show | App\Http\Controllers\ProjectsController@show | | | | GET|HEAD | projects/{projects}/edit | projects.edit | App\Http\Controllers\ProjectsController@edit | | | | PUT | projects/{projects} | projects.update | App\Http\Controllers\ProjectsController@update | | | | PATCH | projects/{projects} | | App\Http\Controllers\ProjectsController@update | | | | DELETE | projects/{projects} | projects.destroy | App\Http\Controllers\ProjectsController@destroy | | | | GET|HEAD | tasks | tasks.index | App\Http\Controllers\TasksController@index | | | | GET|HEAD | tasks/create | tasks.create | App\Http\Controllers\TasksController@create | | | | POST | tasks | tasks.store | App\Http\Controllers\TasksController@store | | | | GET|HEAD | tasks/{tasks} | tasks.show | App\Http\Controllers\TasksController@show | | | | GET|HEAD | tasks/{tasks}/edit | tasks.edit | App\Http\Controllers\TasksController@edit | | | | PUT | tasks/{tasks} | tasks.update | App\Http\Controllers\TasksController@update | | | | PATCH | tasks/{tasks} | | App\Http\Controllers\TasksController@update | | | | DELETE | tasks/{tasks} | tasks.destroy | App\Http\Controllers\TasksController@destroy | | +--------+----------+--------------------------+------------------+-------------------------------------------------+------------+ ستلاحظ أن كل من projects و tasks هي روابط ذات مستوى عالي، وفي تطبيقنا، المهام تتبع المشاريع، لذلك سيكون من الأفضل للروابط أن تكون مُضمّنة مثل /projects/1/tasks/3 بدلا من /tasks/، وهذا يمكن فعله باستخدام شيء اسمه الموارد المُضمّنة nested resources، وكما هو الحال مع أغلب الأشياء في Laravel، التعديل المطلوب سريع وبسيط، فقط قٌم بفتح /app/Http/routes.php وقٌم بالتعديلات التالية: // Route::resource('tasks', 'TasksController'); Route::resource('projects.tasks', 'TasksController'); هذا كل شيء، قُم بكتابة php artisan route:list لنعلم ماذا لدينا لحد الآن: php artisan route:list +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+ | | GET|HEAD | / | | App\Http\Controllers\WelcomeController@index | | | | GET|HEAD | projects | projects.index | App\Http\Controllers\ProjectsController@index | | | | GET|HEAD | projects/create | projects.create | App\Http\Controllers\ProjectsController@create | | | | POST | projects | projects.store | App\Http\Controllers\ProjectsController@store | | | | GET|HEAD | projects/{projects} | projects.show | App\Http\Controllers\ProjectsController@show | | | | GET|HEAD | projects/{projects}/edit | projects.edit | App\Http\Controllers\ProjectsController@edit | | | | PUT | projects/{projects} | projects.update | App\Http\Controllers\ProjectsController@update | | | | PATCH | projects/{projects} | | App\Http\Controllers\ProjectsController@update | | | | DELETE | projects/{projects} | projects.destroy | App\Http\Controllers\ProjectsController@destroy | | | | GET|HEAD | projects/{projects}/tasks | projects.tasks.index | App\Http\Controllers\TasksController@index | | | | GET|HEAD | projects/{projects}/tasks/create | projects.tasks.create | App\Http\Controllers\TasksController@create | | | | POST | projects/{projects}/tasks | projects.tasks.store | App\Http\Controllers\TasksController@store | | | | GET|HEAD | projects/{projects}/tasks/{tasks} | projects.tasks.show | App\Http\Controllers\TasksController@show | | | | GET|HEAD | projects/{projects}/tasks/{tasks}/edit | projects.tasks.edit | App\Http\Controllers\TasksController@edit | | | | PUT | projects/{projects}/tasks/{tasks} | projects.tasks.update | App\Http\Controllers\TasksController@update | | | | PATCH | projects/{projects}/tasks/{tasks} | | App\Http\Controllers\TasksController@update | | | | DELETE | projects/{projects}/tasks/{tasks} | projects.tasks.destroy | App\Http\Controllers\TasksController@destroy | | +--------+----------+----------------------------------------+------------------------+-------------------------------------------------+------------+ جعل روابط ذات اسم لطيف الطرق routes الحالية ممتازة لكنها ذات عناوين يمكن تحسينها، مثل هذا العنوان /projects/1/tasks/2، فسيكون من الرائع للزوار أن يتم تغيير المعرف الرقمي ID بالاسم اللطيف للحقول، فمثلا سوف نحصل على /projects/my-first-project/tasks/buy-milk بدلا من /projects/1/tasks/2. قم بفتح ملف /app/Http/routes.php وضع به التالي: Route::bind('tasks', function($value, $route) { return App\Task::whereSlug($value)->first(); }); Route::bind('projects', function($value, $route) { return App\Project::whereSlug($value)->first(); }); هذه الشيفرة سوف تغير السلوك الافتراضي لـ tasks و projects في artisan routes وجعل الروابط ذات إسم لطيف slug. خاتمة اليوم لقد قمنا بعمل عدة أشياء وهي: تثبيت وإعداد Laravel. إضافة موردان اثنان resources. إنشاء التهجيرات migrations. إضافة بعض بيانات البذور seeds. تكوين هيكل الروابط. بكلمات أخرى، قمنا اليوم بوضع الأساس التي سوف نعتمد عليه في الدروس القادمة من خلال إنشاء جميع العناصر اللازمة حتى تعمل الواجهة الأمامية، ولدينا الآن بعض البيانات في قاعدة البيانات بالإضافة إلى الطرق، في الدرس القادم سوف نبدأ في الواجهة الأمامية للموقع. هنالك بضعة مواقع أخرى لتحصل على المزيد من المعلومات وآخر الأخبار: The Laravel Twitter feed: أخر الأخبار حول تطورات Laravel. Taylor Otwell’s Twitter feed: حساب تويتر لمُؤسّس Laravel. Laravel.io: لمتابعة آخر الأخبار و الدورات من مختلف مواقع الويب، بالإضافة إلى بودكاست أسبوعي يتحدث عن الأفكار والاهتمامات ذات علاقة إلى المنصة. Laravel Packages Registry: مكان جيد لإيجاد أفضل حزم Laravel. Code Bright: كتاب إلكتروني مجاني من المؤلف دايلي ريس Dayle Rees. ترجمة وبتصرف للمقال: Creating a Basic ToDo Application in Laravel 5 – Part 1. حقوق الصورة البارزة: Designed by Freepik.
  10. كل يوم ينمو ووردبريس ويتطور أكثر فأكثر وفي جميع الدول العالم الناطقة باللغة الإنجليزية وغيرها، وأغلب البرمجة في ووردبريس تتم باللغة الإنجليزية بالإضافة إلى أغلب الإضافات والقوالب تكتب بسلاسل نصية باللغة الإنجليزية على الرغم من أن أكثر من نصف مستخدميه لغتهم الأصلية ليست الإنجليزية. هذا المقال، تعزيز للمقال الموجود مسبقا على أكاديمية حسوب، حول دليل المطور لتهيئة إضافات ووردبريس للترجمة. وهذا هو السبب الذي جعلنا نشهد على المدى العقد الماضي المزيد من المناقشات لدعم التدويل التي ستجعل ووردبريس يدعم جميع اللغات الأخرى، وهذا سيكون ضروريا لو كنت تعمل على إضافات أو قوالب عالمية الانتشار. يجب علينا القيام بثلاثة خطوات حتى نتمكن من ترجمة السلاسل النصية لعناصر الواجهة: اختر، صرّح، و استخدم "مجال النص".استخدم وظائف مناسبة لسلاسلك النصية ومجال النص المختار.سيسمح لك هذا بإنشاء ملفات الترجمة.بفضل ملفات الترجمة هذه، ستسمح للناس بترجمة قوالبك و إضافاتك. ما هو "مجال النص" ؟مجال النص هو "ترجمة مساحة الأسماء" (translation namespace) لإضافاتك أو ثيماتك وهي طريقة لوردبريس لفصل قائمة من "السلاسل النصية لترجمتها" من بقية السلاسل النصية. وتكمن أهمية مجال النص في أن بعض السلاسل النصية قد تعني معاني كثيرة في الإضافات والقوالب، فمثلا كلمة "!Let’s go" قد تعني "Create a membership account" في سياق وقد تعني "Start the survey" في سياق آخر. لذلك بعد تعريف مجال النص، واستخدامه مع "gettext" أو مع دوال الترجمة التي سوف نقوم بشرحها فيما بعد. (إن مشروع gettext جزء أساسي من طريقة عمل نظام الترجمة في الووردبريس) إذا أردت أن تضع مجال النص في إضافتك أو في قالبك في الجزء العلوي للتعليقات الموجود في ملف style.css للقوالب أو في ملف PHP الرئيسي لإضافتك. فسيكون مشابهًا لهذا بالنسبة للقوالب: <?php /* Plugin Name: Pretend Plugin [Other comment-block information goes here] Text Domain: wpshout */أما للقوالب فسيكون مشابهًا لهذا: /* Theme Name: Pretend Theme [Other comment-block information goes here] Text Domain: wpshout */دوال Gettext: أبقِ ()__ و ()e_ و ()x_ و ()n_ صحيحةلجعل النصوص الخاصة بك قابلة للترجمة، تحتاج إلى تمرير دالة سوف تقوم باستبدال "!Let’s go" مع ترجمتها باللغة الإسبانية أو العربية أو الفرنسية أو غيرها، ولتسهيل هذا الأمر، يقوم ووردبريس بإعطاء أسماء قصيرة جدا للدوال التي تقوم بهذه الوظيفة. الدالة ()__أعتقد أن هذه الدالة هي الدالة الأهم، فلقد حصلت على أكثر اسم مبهم وغريب. لكن هدفها الرئيسي هو السماح لجميع السلاسل النصية بأن تترجم إلى لغة أخرى إذا كان يجب ذلك. وتُستخدم هذه الدالة مع معاملين الأول للسلسلة النصية والثاني لمجال النص، على سبيل المثال: echo __( 'WPShout is a great WordPress site!', 'wpshout' );الطباعة الذاتية بواسطة () e_الدالة الأولى ستقوم بإرجاع نص فقط ويجب عليك طباعة (عرض) النص بنفسك، فإذا كان هذا يزعجك فيمكنك استخدام ()e_ فهي مثل ()__ echo . ستقوم هذه الدالة باختصار كتابة بعض الأحرف، لكنها لن تقوم بأي شيئ آخر، وهذا مثال تطبيقي على استخدام هذه الدالة: _e( 'WPShout is a great WordPress site!', 'wpshout' );والآن سنبدأ بالتعامل مع الجوانب الدقيقة للترجمة. توفير نص للشرح بواسطة ()x_في بعض الأحيان كلمة أو جملة تكون مبهمة وصعبة الترجمة فقد تعني العديد من المعاني، فمثلا كلمة "post" قد تعني اسما مثل "مشاركة" أو "تدوينة" وقد تعني فعلا مثل "نشر" (to post - to publish). على عكس الدالتين السابقتين، يمكنك بواسطة ()x_ وضع نص لشرح الكلمة أو الجملة مثل المثال التالي: _x( 'Post', 'verb, as in "to publish"', 'wpshout' );النص الأوسط لن يظهر للمستخدم، لكنه سيظهر للمترجم حتى يفهم النص. (يذكر أنه توجد دالة ()ex_ و التي تجمع ما بين e_ و x_). الجمع بواسطة ()n_من المشاكل التي قد تواجهها في الترجمة هو الجمع. ففي اللغة الإنجليزية، "I have 1 Comment" (أنا أملك 1 تعليق) أو "I have 3 Comments" (أنا أملك 3 تعليقات)، لأجل معالجة مشكلة جمع كلمة تعليق، ووردبريس يوفر لك دالة ()n_ التي ستقوم بمعالجة الفرق بين الإثنين. في العادة، عندما تستخدم دالة ()n_ سوف تحتاج إلى استدعاء دالة الكتابة ()printf. (أو sprintf التي تقوم بإرجاع سلسلة نصية على عكس printf التي تقوم بطباعة النص). وهذه الدوال ستقوم باستبدال قيمة في سلسلة نصية مع قيمة تم تمريرها لهم. لتفهم أكثر أنظر للكود أدناه: printf( _n( 'One comment', '%s comments', $comments, 'wpshout' ), $comments );ستلاحظ أننا استخدمنا قيمة عددية مسندة إلى متغير comments$ مرتين. نفترض أن comments$ تمتلك قيمة "3". في المرة الأولى استخدمنا comments$ مع n__ لتحديد هل سنستخدم الجمع أو لا، وبما أن 3 أكبر من 1 سوف يختار " s% comments" بدلا من "One comment". أما في المرة الثانية فاستخدمناها مع printf لوضع الرقم في السلسلة النصية، عن طريق استبدال s% بـ 3 والتي هي قيمة المتغير comments$، لتكون الجملة الكاملة المطبوعة هي "3 comments". دوال Gettext أخرىسوف نقوم بشرح جميع الدوال المهمة والأساسية، وهذا لا يعني أنه لا توجد دوال أخرى جديرة بالاهتمام: ()__esc_attr: هذه الدالة تقوم بنفس وظيفة ()__ لكنها سوف تراعي ()esc_attr (سمة الخروج للـ HTML) لدواعي السلامة. (يوجد أيضا دالة ()esc_attr_e و دالة ()esc_attr_x).()__esc_html: نفس الشيء مع هذه الدالة، ففي سبيل السلامة يمكنك الجمع بين سمة الخروج للـ HTML وبين ترجمتك. (و بالطبع توجد دالة ()esc_html_e و دالة ()esc_html_x). ()n_noop_ : هذه الدالة تقوم بنفس وظيفة دالة ()n_ لكن بدون عمليات.تسليم الترجمة إلى جافا سكريبت عن طريق دالة ()wp_localize_scriptبسبب أن الترجمات في الووردبريس يتم التعامل معها عن طريق PHP، سوف تحتاج إلى تمرير السلاسل النصية لاستخدمها مع الجافا سكريبت، ويمكنك فعل هذا عن طريق دالة ()wp_localize_script. هذه الدالة مفيدة للغاية وتستخدم كثيرا خارج الترجمة، لأنها تمكنك من تمرير أية قيمة أو متغير من PHP إلى جافا سكريبت. لكن الاستخدام الأساسي لها للترجمة ولذلك سميت باسمها. وهذا هو مثال لطريقة استخدام هذه الدالة: wp_localize_script( 'wpshout-js', 'strings', array( 'hello' => __( 'Hello!', 'wpshout' ); ) );وللوصول إلى هذه القيم عن طريق ووردبريس، فستقوم بشيء مثل: alert(strings.hello);تمتلك دالة ()wp_localize_script ثلاثة معاملات: المعرّف (handle) الذي استخدمناه في ()wp_enqueue_script (أو ()wp_register_script) للجافا سكريبت التي نقوم بترجمتها.اسم كائن جافا سكريبت الذي نريد أن ترتبط به ترجمتنا.مصفوفة (array) مترابطة للترجمات، مع مؤشر index أو اسم خاص كمفتاح و قيمة كسلسلة نصية ابتدائية لاستخدمها.يتم التعامل مع الترجمة نفسها عن طريق نفس دوال PHP التي شرحناها في الجزء السابق من الدرس. ما هي ملفات POT ،PO و MO ؟حتى الأن كنا نتحدث عن البرمجة باستخدام PHP، لكن هنالك جزء ثاني لا يعتمد على الـ PHP، وهذا الجزء هو الذي يقوم بإنشاء ملفات الترجمة. يعتبر هذا الجزء صعبا بالنسبة لي، فببطء يقوم نظام ووردبريس ببناء حلول أكثر قوة و أكثر إفادة للتعامل مع العمل الحالي للترجمة (أنظر إلى GlotPress ،translate.wordpress.org و the Polyglot Make blog) لكن يبقى هذا الجزء صعبا للمستخدم ذا الخبرة المتوسطة، على الرغم من أننا سنقوم بشرح أساسياته لكننا لن نخوض في التفاصيل، بالنسبة لي اعتدت على استخدام Poedit كمحرر للترجمة. مهما كانت الطريقة الذي اعتدت بها أن تقوم بإنشاء وتعديل و قراءة ملفات الترجمة، يوجد ثلاثة أنواع أساسية من ملفات الترجمة: ملفات pot.: الملفات الرئيسية للإضافات والقوالب، والتي قامت بجمع جميع السلاسل النصية من الدوال ()s__ وغيرها.ملفات po.: هذه الملفات عبارة عن نص ترجمة السلاسل النصية الإنجليزية إلى اللغة المستهدفة، نادرا ما سوف تقوم بتعديل واحدة مباشرة (لأن الصيغة بها الكثير من الكلمات والرموز المبهمة والغريبة) لكن يمكنك فتحها باستخدام محرر نصوص والقيام بتعديلات سريعة للترجمة.ملفات mo.: الترجمة النهائية من اللغة الإنجليزية إلى اللغة المستهدفة، وهذه الملفات عبارة عن ملفات ثنائية (binary files) تستخدم وتقرأ عن طريق ووردبريس، لذلك عندما تقوم بفتحها مع محرر النصوص لن تستطيع معالجتها، لذا إذا أردت القيام بذلك يجب عليك العودة إلى ملفات PO و التعديل عليها و إعادة إنشاء ملفات MO.كما أخبرتك سابقا، هذا هو الجزء الأصعب بالنسبة لي، لكن إذا كان إضافتك أو قالبك في مستودعات WordPress.org، سوف تجد ملفات pot. جاهزة بالنسبة لك وسيفهم مترجميك كيف يهتمون بالباقي. إذا أردت المزيد من التفاصيل أو الأدوات، قم بزيارة صفحة Translating WordPress. ماذا تعلمنا حول تدويل كود ووردبريسلقد قمنا في هذا الدرس بتغطية الأجزاء الثلاثة الرئيسية لجعل كود ووردبريس الخاص بك جاهزا للترجمة: اختر مجال النص، استخدم دوال gettext ومن ثم أحصل على ملف POT لصنع ملفات الترجمة PO و MO. الخطوات سهلة و قابلة للتنفيذ، ولها تأثير كبير للناطقين بغير اللغة الإنجليزية، أو أولئك الذين يحسون براحة أكبر عند استخدامهم لغة أخرى تعلموها مؤخرا. ترجمة -وبتصرف- للمقال Making plugins and themes translation ready لصاحبه: David Hayes.
  11. يجذب ووردبريس بسبب قوته، وشهرته، وتوثيقه الكثير من طاقة “افعل ذلك بنفسك”، فبشكل عام هذا يبدو رائع، فهذه شهادة على أن الناس لديها آمال عالية في ووردبريس، وهذه طريقة ممتازة لتعلمه، لكن للأسف، فإن جهود “افعل ذلك بنفسك” غالبا ما تكون خاطئة. كمطور، غالبا ما أجد أن هذه جهود الفردية تسقط بالكامل، أو أجد نفسي أفسد الموقع عندما يكون تقريبا يعمل جيدا لكن يبدوا غريبا و هنالك بعض الميزات الرئيسية تنقصه. سوف نتحدث هنا عن أولى و أسوء الأخطاء التي قد يرتكبها شخص جديد إلى عالم ووردبريس، لقد رأينا هذه الأخطاء مرات عديدة، ولقد ارتكبنا بعضها سابقا. 1- محاولة بناء موقعك من الثيم الافتراضي إذا كنت جديدا في ووردبريس، فإنه من السهل بناء موقعك عن طريق: تثبيت الووردبريس. تخصيص الووردبريس ليظهر كما تريد.ربما ستكون لديك معرفة بقوالب ووردبريس، لكن سوف تقوم إما بوضع إحدى القوالب الافتراضية المجانية أو انك ستقوم باستخدام قالب بوتستراب (bootstrap) الذي يقوم بتجريد شكل ووردبريس إلى أساسياته، وسرعان ما ستجد نفسك تقوم بتعديلات على ملفات المصدرية للثيم، فتقوم بحذف أجزاء و إضافة أجزاء أخرى. سبب المشكلة: إن المواقع المبنية على قوالب غير ملائمة تكون في العادة قبيحة جدا، و وضعها في موقعك سيجعله سيئا، لأنك ستقوم بتجاهل العديد من أبرز المميزات المفيدة للووردبريس. ربما تحتاج إلى معرفة: قوة ومرونة ثيمات الووردبريس، خاصة المدفوعة منها، وإن إيجاد ثيم مدفوع قريب من احتياجاتك وتخصيصاتك هو الخيار الصحيح. قم بالبحث عن بعض قوائم الثيمات، ستجد أنه يوجد الآلاف منها، لذلك اجعل بحثك أكثر تحديدا، فمثلا قم بالبحث عن “ثيمات مجلات مسطحة للوردبريس” إذا كنت تبحث عن تصميم مسطح وأنت تقوم بتشغيل موقع مجلة، أو قم بالبحث عن موقع تحبه يعمل على الووردبريس واعرف أي ثيم يستخدم. لا تستخدم قالب “Twenty Fourteen” أو أول ثيم يبدوا جميل وتبدأ ببناء موقعك. 2- إفساد ملفات القوالب أو تكديسها بوسوم HTML في أغلب الأوقات يحدث هذا بسبب الإحباط، عندما لا تعرف كيف تقوم بجعل السلايدر يعمل على صفحتك الرئيسية في الوقت الذي يعمل فيه على صفحة HTML الثابتة. فلماذا لا تقوم بقطع جزء من القالب الذي يتعامل مع السلايدر ولصق السلايدر من موقع HTML (مع جافاسكربت) مباشرة في ملف home.php؟ سبب المشكلة: هذا الأمر يجعل ووردبريس ثابت بدل من ديناميكي، وهذه علامة على أنك لا تعرف ما الذي تقوم بفعله، وهذا معناه في الغالب أنه سيكون هنالك مشاكل قريبا، لأنك ستقوم بإفساد وتغيير شِفرة ووردبريس وستزيد من صعوبة العمل عليها لاحقا. ربما تحتاج إلى معرفة: دوال ووردبريس، التي هي الطريقة الصحيحة (والديناميكية) للقيام بأغلب الأشياء التي تريد القيام بها بنفسك، فعلى سبيل المثال، يمكنك التعامل مع السلايدر على أنه شِفرة قصيرة (shortcode) عن طريق دالة ()do_shortcode. وإن وضع السلايدر بالطريقة الصحيحة يسمح لك بتعديل محتويات السلايدر من داخل منطقة إدارة ووردبريس في موقعك. 3- إعادة بناء الوظائف يدويا بدل التعامل معها عن طريق الإضافاتخاصة عندما تكون جديدا في ووردبريس، فإنه من السهل القيام بأشياء اليدوية عن طريق الإضافات، والمثال الكلاسيكي على ذلك هو القيام بلصق شِفرة التتبع الخاصة بـجوجل أناليتكس (Google Analytics) مباشرة في ملف header.php بدل إستخدام Google Analyticator أو أية إضافة مماثلة، وإن القيام بهذه الطريقة يعني أن جوجل أناليتكس لن تتكامل مع موقعك في الوقت الذي يجعل فيه Analyticator الأمر أسهل بالإضافة إلى أن إلصاق شِفرة جوجل أناليتكس إلى الشِفرة المصدرية للقالب لديه سلبياته التي ذكرناها في النقطة الثانية. ومثال آخر على ذلك هو تعديل الأعمدة يدويا داخل التدوينة عن طريق أنماط مضمنة، مثلا (“width: 50%”) بدل استخدام Column Shortcodes أو أية إضافة مشابهة. سبب المشكلة: إعادة اختراع العجلة يستغرق وقتا طويلا و يقود في الغالب إلى نتائج أسوء. ربما تحتاج إلى معرفة: غريزة البحث عن إضافة قبل أي شيئ آخر، فووردبريس يمتلك الآلاف من الإضافات المجانية، وإذا أردت القيام بشيء يحتاجه أشخاص آخرون (مثل مجموعة جميلة من تصاميم الأزرار المسطحة) قُم بالبحث عنه ولا تستسلم حتى تجده. ملاحظة: هذا لا يعني أنه يجب عليك أن تعتمد على الإضافات في كل شيئ بدل من كتابة سكربتات بسيطة (مثل الفلترات) إذا كنت تعرف كيف تكتبها، هذه النصيحة تستهدف القادمين الجدد لتجنب على سبيل المثال صنع حلول للتجارة الإلكترونية بنفسهم بدلا من إستخدام WooCommerce. 4- اقتصار ووردبريس على جزء المدونة من الموقعيحدث هذا عندما تبقي موقعك القديم يعمل وتقوم ببناء ووردبريس في “blog/” ثم تقوم بنسخ جميع ملفات CSS من الموقع الرئيسي و تضعهم (على الأرجح) في قائمة التصفح الرئيسية لموقعك ككود HTML في ملف header.php (تقوم بتكرار خطأ رقم 2 مرة أخرى). سبب المشكلة: إن تكرار تصميم موقعك الرئيسي على ووردبريس هو مضيعة للوقت، فأنت الآن تحافظ على نسختين من ملفات CSS ومن قائمة التصفح الرئيسية وغيرها. وستجد أن العشرات من مميزات الووردبريس لا تعمل سوى على الجزء المدونة في الموقع. ربما تحتاج إلى معرفة: ووردبريس هو نظام إدارة المحتوى، وليس منصة مدونات فالعديد من المواقع التي تضع ووردبريس كمدونة يجب أن تعمل بالكامل على ووردبريس، باستثناء تطبيقات الويب المعقدة، لكن إذا كنت، على سبيل المثال، تقوم بنقل مدونة الشركة إلى ووردبريس، فقُم بنقل بقية الموقع كذلك، وهكذا ستقوم بإدارة نسخة واحدة من كل شيئ وستحصل على مميزات ووردبريس على كامل الموقع. في الختام …بشكل عام، كل هذه الأخطاء سببها عدم معرفة ماذا يمكن للووردبريس أن يفعله، فهذا الأمر يشبه استئجار طائرة للطيران عبر البلاد، لذلك إذا بدأت بالشعور أن المشروع الذي تقوم به بنفسك بدأ يفشل وبدأت الأخطاء والمشاكل بالظهور، فهذه علامة على ضرورة التريث واتخاذ خطوة للوراء، والبدء بتعلم المزيد عن ووردبريس قبل بدأ العمل بها. إذا كنت شخص من نوع يريد أن يفعل كل شيئ بنفسه، فنرجو أن تساعدك هذه النصائح، وإذا كنت تعرف شخص من هذا النوع، فنرجو منك إخباره بهذه النصائح، فهذه النصائح يمكن أن تحدث فرقا بين تجربة أولية جيدة مع ووردبريس وبين إحباط كامل، وكالعادة نريد أن نسمع تعليقاتكم. ترجمة -وبتصرف- للمقال: Classic Do-It-Yourself WordPress Mistakes To Avoid لصاحبه Fred Meyer. حقوق الصورة البارزة: Designed by Freepik.
  12. واحدة من أبرز قوى ووردبريس مكتباته التي تحتوي على المئات من دوال PHP، وهذه الدوال لديها وظائف متعددة من كتابة روابط التدوينات والمشاركات داخل الإضافة إلى استرجاع اسم مستخدم كاتب التدوينة والاستعلام عنه في قاعدة البيانات. فإذا لم تفهمهم، ستكون العناصر الأساسية للووردبريس مثل the_post غريبة بالنسبة لك، وسيكون الكود التي تكتبه مليئا بالأخطاء والغرابة. وفي نفس الوقت، عند محاولة استعمال المئات من الدوال ذات أسماء غير نظامية يمكن أن يسبب الإرباك لقارئها، لذا سأقوم اليوم بإعطائك مبدأين أساسيين لفهم دوال ووردبريس. هذه المبادئ المنطقية تطبق بشكل واسع (إذا لم يكن عالميا) على مكتبات الدوال، والتي سوف تعطيك نظرة خاطفة على وظيفة دالة ووردبريس معينة. 1. دوال _get تقوم بإرجاع أشياء و دوال _the تطبع أشياءهذا ملخص بسيط لآلية عمل هذين الدالتين: دوال _get تقوم بإرجاع قيمة، مما يسمح لك بالتعامل معها في تعليمات برمجية لاحقة. دوال _the تقوم بطباعة قيمة في صفحة HTML في المكان الذي تم استدعاؤها فيها.ولتوضيح ذلك، لنلق نظرة على الكود المصدري لدالتين، دالة ()the_ID و دالة ()get_the_ID: function get_the_ID() { post = getpost(); return !empty(post ) ? $post->ID : false; } function the_ID() { echo get_the_ID(); }باختصار، إن دالة ()get_the_ID تقوم بإرجاع مُعرف الرقمي للتدوينة، وأما return فهي تعني: قُم بإعطاء القيمة لمن طلبها”، وعندما تحصل على هذه القيمة، يمكنك القيام بأي شيئ بها، مثلا تقوم بضربها في 3، قسمتها على 2، وغيرها حسب البرنامج، (بالمناسبة إذا كنت تتساءل على بقية الشِفرة البرمجية فإن معناها قُم بإرجاع المُعرف، أو قُم بإرجاع false إذا لم تجد التدوينة التي يجب أن تحصل على مُعرفها). لنفترض أنك ترد تعديل صفحة php، لنأخذ ملف index.php للقالب على سبيل المثال، وتريد أن تقوم بطباعة عنوان التدوينة في الصفحة، هذه بعض الخيارات لتفعل ذلك: <h1><?php get_the_title(); ?></h1> <!-- لن يتم طباعة أي شيئ --> <h1><?php the_title(); ?></h1> <!-- طباعة عنوان التدوينة داخل عنصر h1 --> <h1><?php echo get_the_title(); ?></h1> <!-- طباعة عنوان التدوينة داخل عنصر h1 --> <h1><?php echo 'My title: ' . get_the_title(); ?></h1> <!-- طباعة ": My title" وعنوان التدوينة داخل عنصر h1 -->سيكون مفيدا أن تعرف هذه العلاقة التي تُعقد عبر مكتبة دالة ووردبريس مع استثناء أن ()the_post تقوم بشيء مهم لكنها لا تطبع أي شيئ. 2. داخل أو خارج الحلقة التكراريةالحلقة التكرارية هي النواة التقنية الأساسية لووردبريس، بعض الدوال يجب أن يتم استدعاؤها داخل الحلقة التكرارية، وبعضها لا يجب ذلك، فمثلا هذا المثال يوضح لك ما معناه "دالة داخل الحلقة": //خارج الحلقة التكرارية if ( have_posts() ) : while ( have_posts() ) : the_post(); // داخل الحلقة التكرارية، محتويات التدوينة تكون هنا endwhile; endif; // خارج الحلقة التكرارية مرة أخرىللتمييز بين “دالة داخل الحلقة” و “دالة خارج الحلقة”، سنقوم باستخدام التشبيه لتفسير مكان الحلقة داخل الووردبريس: لنتخذ ووردبريس كمصنع سيارات! ووردبريس هو مصنع السيارات. المشاركات والتدوينات هي السيارات. الحلقة التكرارية هي خط التجميع في المصنع.دعونا نشرح العلاقة بين هذه المصطلحات بمزيد من التفاصيل: خط التجميع تدخل داخله أجزاء السيارات خامة لتخرج سيارة كاملة. بنفس الطريقة، الحلقات التكرارية هي مواد المشاركات الخامة (محتوى المشاركة والبيانات التعريفية) تدخل لتخرج صفحة HTML جاهزة.والآن دعونا نشرح الجزء المهم: كل عملية تقوم بتغيير أو تقوم باسترداد معلومات حول السيارات يجب أن تكون في خط التجميع، ويجب أن يتم الإعلان عن أية سيارة ستعمل بطريقة أخرى، فالعمليات التي لا تعمل على السيارات يجب أن لا تكون في خط التجميع. وبالمثل، كل دالة تقوم باسترداد أو تغيير أو عرض لخصائص التدوينة أو المشاركة يجب أن تكون إما داخل الحلقة التكرارية أو يجب أن يتم إعطاء معرف التدوينة أو المشاركة للتعامل معها كمعامل (paramter) للدالة. الدوال التي لن تعمل عن التدوينات/المشاركات لا يجب أن تكون داخل الحلقة التكرارية. عمليا هذا يعني: إن دوال _the وأغلب دوال _get_the تفترض معرفة التدوينة/المشاركة الحالية لذا سيعملون فقط داخل الحلقة التكرارية. أما في خارج الحلقة التكرارية، يجب إخبار دوال _get_the على أية تدوينة ستعمل، أي يجب تمرير معرفة التدوينة. الدوال التي لا تستخدم لاسترداد أو تغيير أو عرض لخصائص التدوينة/المشاركة يجب أن لا يتم استدعاؤها في الحلقة التكرارية.على خط التجميع: دالة _the_title التي تعمل فقط في الحلقات التكرارية. بالنسبة لآلة الطلاء فإنه يجب على الآلة أن تعرف الكثير من المعلومات حول السيارات قبل البدء بطلائه، ولهذا السبب ستجد هذه الآلة في خط التجميع تحصل على معلومات السيارة الحالية بهذه الطريقة و سوف تكون في المكان الصحيح لطلاء السيارة في الوقت المناسب في المصنع. آلة الطلاء في هذه الحالة هي دالة _the_title، فهي تعمل فقط داخل الحلقة التكرارية، وهي تقوم بطلاء الموقع الذي صممه المصنع لعمل عنوان التدوينة الحالية. لتكون قادرا على الإشارة إلى عنوان تدوينة في موقع ربما يمتلك أكثر من 1000 تدوينة ومشاركة يجب أن نعلم أية تدوينة نريدها بالضبط، والدالة التي تقوم ببساطة بطباعة عنوان التدوينة (بدون خيارات أخرى) لن تؤثر كثيرا خارج سياق الصفحة التي صممت من تلك التدوينة. لذلك فالطريقة الوحيدة لتعمل دالة ()the_title هو وضعها داخل الحلقة التكرارية، مثل الآلة الطلاء التي لا يجب أن تكون في بهو المصنع. داخل أو خارج خط التجميع: ()get_the_title، دالة داخل أو خارج الحلقة التكرارية. دعونا نفترض أنك تريد معرفة لون طلاء لسيارة، وهذا الأمر سيكون ذا أهمية داخل خط التجميع، وفي هذه الحالة سوف تقوم ببناء آلة تقوم بإعطائك لون السيارة التي تمر من أمامها. لكن قد ترغب أيضا بإرسال فريق مراقبة الجودة إلى منطقة الشحن للحصول على لون سيارة معينة، لذلك سوف يحتاج الفريق إلى معرفة أية سيارة سيقومون بتفقدها، وإلا لن يستطيعوا إخبارك بأي شيئ. بكلمات أخرى، يمكنك فعل هذا داخل أو خارج خط التجميع، لكن إذا كنت في الخارج، يجب عليك أن تقوم بخطوة إضافية لتحديد أية سيارة أنت مهتم بها. فمثلا دالة ()get_the_title التي تعمل داخل الحلقة التكرارية بدون إدخال معطيات، أو خارج الحلقة مع إدخال مُعرف التدوينة، كما يلي: get_the_title(); // يتم استدعاؤها داخل الحلقة التكرارية، تقوم بإعطائك عنوان التدوينة الحالية. // استدعاؤها خارج الحلقة لن يفيد. get_the_title(‘121’); // داخل أو خارج الحلقة التكرارية، تقوم بإعطائك عنوان التدوينة مع المُعرف 121.خارج خط التجميع: ()wp_enqueue_script، دالة خارج الحلقة التكرارية. حتى الآن تحدثنا كثيرا حول خط التجميع في المصنع، ومع ذلك، قد يحتوي المصنع أيضا على مستودع ومكتب الاستقبال وقسم الشحن والمكاتب الإدارية وغيرها. ولا أي إدارة من هذه الإدارات تحتاج إلى معرفة أية سيارة يتم العمل عليه الآن، وأنت بالتأكيد لا تريد وضع المكاتب الإدارية مع خط التجميع. وهذا هو نفس الحال مع دالة ()wp_enqueue_script التي لا تفيد داخل الحلقة التكرارية، فهذه الدالة تستعمل لمعرفة أن صفحة ما تم صنعها بواسطة مصدر خاص للووردبريس أو لا. ملفات جافاسكريبت ليست جزءً من التدوينة تم صنعه بواسطة الحلقة التكرارية، فهو لا يتفاعل مع التدوينات بنفس الطريقة التي لا يتفاعل فيها مكتب الحسابات مع السيارات، فعندما توجد شحنة سيارات جاهزة، سوف يتأكد هذا القسم من أن الشحنة لديها فاتورة ملتصقة بها، لكنه بالتأكيد لا يعقل أن يتم إلصاق الفاتورة على أرض المصنع. لذلك لا تقم باستخدام دالة ()wp_enqueue_script في الحلقة التكرارية، وسيكون أفضل لو وضعتها في ملف functions.php للقالب أو للإضافة. قم بالبرمجةحسنا حاولت تسهيل هذا الأمر عن طريق استعمال جميع معرفتي عن مصانع السيارات، و من الأرجح أنني قمت بتوسيع منطقة التشبيهات داخل دماغي، لكن أرجو أنني علمتكم بعض المفاتيح الرئيسية التي سوف تمكنك من الدخول إلى عالم دوال ووردبريس وأنت مطمئن، وإذا كان لديك أي سؤال أو تعليق، فيسرنا أن نسمعه في التعليقات في الأسفل، وإذا أعجبك هذا المقال، أرجو أن تقوم بمشاركتها مع أصدقاءك. ترجمة -وبتصرف- للمقال: Two Key Principles for Understanding WordPress Functions لصاحبه Fred Meyer. حقوق الصورة البارزة: Business vector designed by Freepik.
×
×
  • أضف...