ويب

برمجة لوحة التحكم – الجزء 5

الفهرس : برمجة لوحة التحكم الجزء 1 || برمجة لوحة التحكم  الجزء 2 ||  برمجة لوحة التحكم – الجزء 3 || برمجة لوحة التحكم – الجزء 4

 

نتعلم فى هذه المقالة كيفية الإضافة وسنقوم بعمل صفحة اضافة تقوم باضافة الـ movie للـ database
هذه لا تعتبر صفحة جديدة منفصلة عن الـ movies بل هى تابعة للـ movies وبالتالى لن نقوم باداراج موجه للصفحة ولا انشاء Controller جديد حيث أن MovieController من المفترض انه يقوم بعمل handel لكل الحالات من العرض والاضافة والتعديل وما الى ذلك .

الإضافة

نقوم بإنشاء ملف جديد  بمجلد الـ views بداخل مجلد movies كالتالى : create_edit.blade.php وطبعا يتضح من الاسم اننا سنستخدم هذا الملف لغرضين لغرض الـإضافة وكذلك لغرض الـ Edit

قم بنسخ الكود التالى ووضعه فى ملف create_edit_blade.php

@extends('adminlte::page')

@section('title', 'AdminLTE')

@section('content')
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary box-solid">

                <div class="box-header with-border">
                    <h3 class="box-title">
                        <span><i class="fa fa-edit"></i></span>
                        <span>{{ isset($item)? 'Edit ' . $item->name : 'Create a new Movie' }}</span>
                    </h3>
                </div>

                <div class="box-body ">

                    <form method="POST" enctype="multipart/form-data"
                          @if(isset($item))  action="{{route('movies.update',$item) }}"
                          @else
                          action="{{ route('movies.store') }}"
                          @endif

                          accept-charset="UTF-8">
                        @csrf
                        @if(isset($item))  @method('PUT') @endif


                        <div class="form-group">
                            <label >Movie Name</label>
                            <input type="name" required class="form-control" name="movie_name"
                                   placeholder="Enter Movie Name"
                                   @if(isset($item))  value="{{$item->name}}" @endif
                            >
                        </div>

                        <div class="form-group">
                            <label >Movie Description</label>
                            <input type="name" required class="form-control" name="movie_desc"
                                   placeholder="Enter Movie Description"
                                   @if(isset($item))  value="{{$item->description}}" @endif
                            >
                        </div>

                        <div class="form-group">
                            <label >Movie Production Year</label>
                            <input type="name" required class="form-control" name="movie_year"
                                   placeholder="Enter Production Year"
                                   @if(isset($item))  value="{{$item->year}}" @endif
                            >
                        </div>

                        <div class="form-group">
                            <label >Movie Cast</label>
                            <input type="name" required class="form-control" name="movie_cast"
                                   placeholder="Enter Movie Cast"
                                   @if(isset($item))  value="{{$item->cast}}" @endif
                            >
                        </div>

                        <div>


                            <div class="box-footer">
                                <button type="add" class="btn btn-primary">@if(isset($item))  Update @else Add @endif
                                </button>
                            </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
@stop

ثم نذهب لملف الـ Controller المسمى MovieController وبداخل الميثود create نضع التالى

return view('movies/create_edit');

كما بالصورة

 

والان نقوم باستدعاء الرابط /movies/create فى المتصفح وسنجد التالى :

وكل ما فعلناه هو أننا قمنا باضافة الـكود السابق فى ملف create_edit وهو عباره عن كود html عادى جدا اذا كان لديك خبرة ولو سطحية عن الـ html فستفهمه بالتأكيد مع ذلك سنتطرق له سريعا طبعا لدينا <div لديه <div اخر  بداخله <form الخ لكن ما قد يبدو غريبها هو شىء مثل هذا السطر

<span>{{ isset($item)? ‘Edit ‘ . $item->name : ‘Create a new Movie’ }}</span>

وهو شىء غير معتاد فى html لذلك سنتطرق اليه هنا بالنسبة لـ {{ }} هى خاصة بالـ laravel blade يتم تعويض قيمتها بقيمة متغير قادم من php لذلك فيقوم هنا بعمل check باستخدام ميثود php المسماه isset($item) وهذه الصفحة بما انها تتستخدم للاضافة وكذلك للتعديل فى نفس الوقت فانها تعرف الفرق بين العملية الحالية كعملية اضافة فيلم جديد او كتعديل فيلم سابق عن طريق وجود item لها قيمة لانه فى حالة التعديل يتم تمرير الـ $item للملف create_edit وبالتالى isset تعود بـ true اما فى حالة إنشاء فيلم جديد ننادى create_edit بدون ان يكون هناك item وبالتالى يفهم الملف ان العملية الحالية هى لإنشاء جديد وليس للتعديل وستجد isset مكررة فى عدة مواضع اخرى مثل الـ method الخاصة بالريكوست فتجد انه فى الحالة العادية اى الانشاء ننادى الـرابط /movies بـ استخدام POST اما فى حالة التحديث نناديه باستخدام الميثود PUT مع الـ id

كذلك بداخل الـ form مع كل حقل مثل اسم الفيلم والوصف الخ.. ستجد

وهذا معناه انه اذا كانت ال $item لها قيمة فانه  فاننا سنضع القيمة بداخل الحقل اى عند تعديل الفيلم سنقوم بوضع قيم اسم الفيلم القديم بداخل هذا الحقل كما سترى لاحقا .
كذلك ستجد فى نهاية الملف

اى انه فى حالة الاضافة اجعل اسم الزر الاسفل Add واذا كان فتح الملف للتعديل و item لها قيمة اظهر كلمة Update كعنوان للزر كما سترى لاحقا

الان قد تكون لاحظت انه فى الـ form من أعلى  كما بالصوة

ان الـ action عند ضغط الزر يقوم باستخدام الميثود route ويعطيها movies.update اذا كان للـ item قيمة او movies.store اذا لم يكن لها قيمة و update و store هنا المقصود بهم الـ methods الموجودة داخل الـ MovieController قم بالذهاب اليه الان وستجدهم !

 

الان عند الضغط على الزر Add ستجد انه ينادى الميثود store وبالتالى يعود لك بصفحة بيضاء لذلك نريد الذهاب للملف MovieController ونقوم بالتعديل على ميثود store  ونضع الكود الخاص بالتخزين كالتالى

 

وهذا الكود عباره عن انشاء Object جديد من الـ Movie وكما ذكرنا من قبل أن هذا الـ Object مربوط بالداتا بيز عن طريق Laravel وهنا new Object == إنشاء صف جديد قاعدة البيانات فى جدول movies
وبعد ذلك ستجد أننا بكل سطر نقوم باسناد قيمة للعمود

اسم الفيلم فى السطر 44 movie->name الـ name هنا هو الموجود بقاعدة البيانات اسم العمود الخاص باسم الفيلم

أما request->movie_name  فهى الخاصة بالـ form وقادمة مع الـ POST Request  الموجودب الباراميتر وستجدها خاصية موجودة بالـ form فاذا قمت بالعودة لملف create_edit ستجد ان هناك اسم لكل حقل وهو ما نستخدمه هنا

وكل حقل له خاصية name تساوى مفتاح او key معين فى الميثود store لاحقا نقوم بسحبه عن طريقة request->اسم الخاصية

وأخيرا فى الميثود store ستجد اخر سطر اننا نقوم بعمل save() للـ movie وهى الميثود التى تقوم بعمل insert فى الداتا بيز للـ row الخاص بالـ movie .

نقوم بحفظ الملف MovieController وكذلك الملف create_edit ونقوم بفتح الصفحة فى المتصفح /movie/create ثم ادخال بيانات الفيلم الجديد ثم الضغط على

Add

سيذهب بك الى صفحة بيضاء لكن اذا رجعنا الى /movies سنجد ان الفيلم تم اضافته فى القائمة بالاسفل

يبدو أن الذهاب للاسفل كل مرة أمر سىء وممل ويجب أن تبع التقليد البرمجى الذى يجعلنا نعرض الاخير اولا او نرتب العناصر تنازليا من الاخير للاول ويممكنا فعل ذلك من الميثود index  باستبدال السطر 18 بالسطر 19 فى الصورة التالية : اى اننا نستخدم الميثود OrderBy ونعطيها عنصر الترتيب وهو ال id والـ DESC تعنى تنازلى ثم نستدعى بعدها الميثود get() لجلب البيانات .

نذهب الان لصفحة /movies وسنجد أن الترتيب تغير

 

والان نريد اضافة زر add ليأخذنا لصفحة الاضافة لذلك بداخل صفحة index تحت @section مباشرة

<div class ="row col-xs-3 ">
	<p>
 <a type="button" href="movies/create" class="btn btn-block btn-primary">Add new Movie</a>
</p>
</div>

ثم نقوم بتشغيل /movies

وسنجد زر الاضافة قد تم اضافته

وعند الضغط عليه سيقوم بفتح صفحة إنشاء فيلم /movies/create ويمكننا الاضافة بشكل عادى .

الان انتهينا من الاضافة وكل شىء تمام .

 

التعديل

لاضافة خاصية التعديل نحتاج لاضافة زر لكل صف فى العرض للتعديل وبالمرة سنضيف زر الحذف اذا كنت تتذكر كيف قمنا بعمل index  فهى عباره عن جدول وصفوف سنضيف فقط عمود اخر الى الجدول كالتالى :

الجزء المظلل هو ما اضفناه للملف index وهو عباره عن header للـجدول وكذلك row للجدول th وtd وهو عباره عن زرين زر عادى على هيئة html link ب تاج <a ويقوم بفتح رابط الmovie/id/edit حيث ال id هو id الـ movie  وهذا الـlink عند مناداته يتم توجيه المستخدم لـلميثود
وزر اخر للحذف وهو موضوع داخل form لنتمكن بمناداة الlink الـ movies/id باستخدام الميثود DELETE لحذف العنصر  والان نقوم بالذهاب صفحة الـ movies ونجد زر ال edit وزر ال delete

عند الضغط على زر edit سيقوم فتح صفحة /movies/{id}/edit حيث أن الـ {id} هو id الـ movie والذى يكون عباره عن $item->id  فى كل لفة فى الـ foreach الموجودة بملف index
الان نذهب للـ MovieController ونضيف التالى بداخل الـmethod المسماه edit

الـباراميتر movie تقوم laravel باحضار ال movie الخاص بالـ id الذى تم تمريره لذلك نقوم بإنشاء متغير اسمه $item يساوى متغير الـ movie ومن ثم يعود بالـ view المسمى create_edit مع تمرير الـ item والتى هى هنا الـ movie لتصل الى create_edit هل تتذكر isset($item) هناك ؟!

حسنا الان نقوم بفتح صفحة الـ movies والضغط على زر الـ edit وسوف نشاهد التالى :

عظيييم !! الان نجد انه يفتح صحفة create_edit الخاصة بالاضافة والتعديل لكن لغرض التعديل والحقول بها النصوص الخاصة بالفيلم وكذلك زر الـ add صار اسمه update كما تتذكر اننا قمنا بعمل isset اذا كانت الـ item موجودة يتم تسمية الزر Update والا فسيكون اسمه Add .

الان عند الضغط على زر الـ update ستقوم laravel بتوجيه المستخدم الى الميثود update الموجودة بملف MovieController
وهى الان فارغة لكننا سنقوم باضافة الكود بها كالتالى :

وستجد انها تحتوى على باراميترين الأول Request القادم من الـ form الموجود بـ create_edit والثانى هو movie عباره عن الـ Movie الذى يتم تحريره حاليا
بعدها قمنا بعمل اسناد قيم الـ form للـ movie واخيرا save() تمام مثل اضافة جديد لكن بدون new Movie() لاننا هنا نقوم بتحرير movie موجود بالفعل
وأخيرا الميثود redirect لاعادة التوجيه للصفحة الرئيسية الخاصة بالـ Movie
قم بحفظ الملف والذهاب الى  /movies  ومن ثم الضغط على زر edit لأى فيلم وستجد صفحة الـ edit فتحت  عندها قم بتغيير اى حقل من الحقول ومن ثم اضغط على Update وستجد انه تم تحديث الـ Movie بنجاح .

الحذف

الان زر الحذف يقوم بمناداة الميثود destory الموجودة بملف الـ MovieController وسنقوم  هناك بكتابة السطرين التاليين فقط.

قم بحفظ الملف والذهاب الى الرئيسية ثم اضغط على زر الحذف المقابل لأى Movie وستجد أنه تم حذفه بنجاح

فى حالة وجود اى خطأ فقم بمراجعة الدرس مرة اخرى ومراجعة خطواتك بدقة واذا استمر الخطأ اخبرنا فى التعليقات .

الى هنا ننتهى بالتأكيد عدة تدوينات لن تكفى لشرح كل شىء عن Laravel لذلك من الان ستعتمد على نفسك فى إستكمال رحلة لوحات التحكم .

أين تذهب من هنا ؟

* قم بإنشاء صفحة لوحة تحكم أخرى للفنانين Artist وامشى بنفس الخطوات التى قمنا بها للـ Movie وانشىء الـ Artist والـ ArtistController وأنشىء مجلد artist بداخل views وبداخله create_edit و index ايضا نفس الخطوات تماما فى رحلتنا مع الـ movie ستكون لأى صفحة اخرى من لوحة التحكم .

* قم بمحاولة اضافة صورة أو poster للـ film كل ما سيلزمك هو اضافة مكان للصورة html فى index وكذلك فى create_edit للرفع وستجد شروحات كثيرة ثم قم بما يلزم بداخل الـ methods الخاصة بالـ Controller .

استمتع !.

 

 

السابق
برمجة لوحة التحكم – الجزء 4
التالي
الـ RX بالعربية – مقدمة

اترك تعليقاً

This site uses Akismet to reduce spam. Learn how your comment data is processed.