آموزش ساخت اپلیکیشن مدیریت وظایف با لاراول : قسمت آخر

دسته بندی: برنامه نویسی
سطح مقاله: متوسط
زمان مطالعه: ۱۶ دقیقه
۰۹ تیر ۱۳۹۸

با قسمت ششم و آخر از سری مقالات آموزشی "آموزش ساخت اپلیکیشن مدیریت وظیفه با لاراول"  در خدمت شما هستیم! در این قسمت ساخت پروژه را با تکمیل بخش ویرایش و حذف تسک ها به پایان می بریم. پس تا پایان این مقاله همراه ما باشید تا اولین پروژه لاراولی خود را به ثمر برسانیم!

آموزش ساخت یک برنامه مدیریت وظیفه با لاراول

آموزش لاراول

در این بخش به تکمیل عملیات CRUD که بخشی از آن را در قسمت قبل کامل کردیم می پردازیم. ابتدا بخش ویرایش را با ساخت ویو و کنترلر به اتمام رسانده و سپس به سراغ قسمت حذف تسک ها می رویم. البته در این قسمت با طریقه استفاده از ورب های PATCH، PUT و DELETE در فرم های لاراول نیز آشنا خواهیم شد.

ویرایش Task ها

به مسیر resources>views رفته و فایل app.blade.php را باز کنید. در قسمت قبل، حلقه تکرار مربوط به تسک ها را ایجاد کردیم. همانطور که مشاهده می کنید در هر تگ li یک فرم مربوط به ویرایش تسک به صورت زیر وجود دارد:

<form action="" class="form-horizontal hidden-form">
    <div class="form-group">
        <div class="col-md-12">
            <input type="text" class="form-control hidden-title" value="وظیفه مهم اول" placeholder="نام تسک را وارد کنید"/>
        </div>
     </div>
     <div class="form-group">
         <div class="col-md-12">
             <textarea name="" class="form-control hidden-description" cols="30" rows="5" placeholder="توضیحات تسک را وارد کنید">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</textarea>
         </div>
      </div>
      <div class="form-group">
          <div class="col-md-12">
              <label for='hidden-status'>وضعیت: </label>
              <select class='form-control' name='status' id='hidden-status'>
                  <option value='Undone'>انجام نشده</option>
                  <option value='Done'>انجام شده</option>
                  <option value='Cancel'>صرف نظر شده</option>
                  <option value='Migrated'>موکول شده</option>
              </select>
         </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <button class="btn btn-primary" id="edit-btn" type="submit">ذخیره کردن</button>
        </div>
    </div>
</form>

ابتدا باید تمهیدی بیاندیشیم تا ارورها در فرم نمایش داده شوند. برای این کار می توانیم به راحتی از کد آماده ای که در قسمت قبل برای نمایش ارورها ایجاد کردیم استفاده کنیم. کافی است آن را با استفاده از دستور include در جایی از کد فراخوانی کنیم. بنابراین دستور زیر را در هر جایی از کد مثلا داخل فرم ویرایش وارد کنید:

@include('section.error')

حالا باید URL لازم برای مقدار action فرم ویرایش را تعیین کنیم. برای این کار دوباره از متد route لاراول استفاده می کنیم. پس کد زیر را به جای action فرم ویرایش تسک وارد کنید:

{{ route('Task.update' ,  ['id'=>$task->id] ) }}

آرگومان اول متد route نام روت مربوط به ویرایش است که مثل قسمت قبل می توانید آن را با استفاده از دستور php artisan route:list به دست آورید. آرگومان دوم متد روت، پارامتر شناسایی تسک است که در لیست روت ها به صورت زیر دیده می شود:

PUT|PATCH | Task/{Task} |  Task.update  | App\Http\Controllers\TaskController@update

اما منظور از {Task} چیست؟ چطور می توانیم یک تسک را به روتر ارسال کنیم؟ پاسخ استفاده از route model binding در لاراول است. در لاراول به راحتی می توانیم id موجودیت را ارسال کرده و در کنترلر، آبجکت مدل آن را که دارای همه فیلد های رکورد آن در جدول است دریافت کنیم. لاراول کار تبدیل id به آبجکت تسک را برای ما انجام می دهد.

کار بعدی ارسال توکن csrf به همراه درخواست ویرایش است. بنابراین کد زیر را نیز داخل فرم وارد می کنیم:

{{ csrf_field() }}

در آخر باید فرم را برای ارسال درخواست از نوع PUT یا PATCH آماده کنیم. چرا که همانطور که در قسمت های پیشین گفتیم در REST برای ارسال درخواست های ویرایش از این دو متد استفاده می کنیم. اما همانطور که می دانید در فرم های HTML اتریبیوت method نمی تواند مقادیر PUT، PATCH و DELETE را بپذیرد.

اما لاراول برای حل این موضوع چه کاری انجام می دهد؟ برای ارسال درخواست هایی از این دست، لاراول ارسال ورب PATCH و امثال آن را با ایجاد یک فیلد مخفی شبیه سازی می کند. برای ساخت این فیلد مخفی می توانید به راحتی از دستور زیر استفاده کنیم:

{{ method_field('patch') }}

می توانید نوع ورب را به راحتی به عنوان آرگومان به متد method_field() ارسال کنیم و بقیه کارها را به لاراول بسپاریم. ما در اینجا از patch استفاده می کنیم. بنابراین کافی است همین کد را در فرم ویرایش تسک وارد کنیم.

آخرین کاری که باید برای آماده سازی فرم ویرایش تسک انجام دهیم پر کردن فیلدهای فرم با مقادیر فعلی تسک است. برای این کار دستور زیر را به جای value فیلد title وارد می کنیم:

{{ $task->title }}

و دستور زیر را نیز در داخل فیلد description وارد می کنیم:

{{ $task->description }}

در پایان فرم ویرایش شما باید چیزی شبیه به این باشد:

<form action="{{ route('Task.update' ,  ['id'=>$task->id] ) }}" method="POST" class="form-horizontal hidden-form">
    {{ csrf_field() }}
    {{ method_field('patch') }}
    @include('section.error')
    <div class="form-group">
        <div class="col-md-12">
            <input type="text" name='title' class="form-control hidden-title" value="{{ $task->title }}" placeholder="نام تسک را وارد کنید"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <textarea name='description' class="form-control hidden-description" cols="30" rows="5" placeholder="توضیحات تسک را وارد کنید">{{ $task->description }}</textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <label for='hidden-status'>وضعیت: </label>
            <select class='form-control' name='status' id='hidden-status'>
                <option value='Undone'>انجام نشده</option>
                <option value='Done'>انجام شده</option>
                <option value='Cancel'>صرف نظر شده</option>
                <option value='Migrated'>موکول شده</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <button class="btn btn-primary" id="edit-btn" type="submit">ذخیره کردن</button>
        </div>
    </div>
</form>

کار ما با ویو تمام شده است. حالا به سراغ متد update() در TaskController بروید! متد update() را به شکل زیر در آورید:

public function update(TaskRequest $request, Task $Task)
{
    $Task->update($request->all());
    return redirect()->back();
}

احتیاج داریم که مقادیر وارد شده از فرم ویرایش را اعتبار سنجی کنیم بنابراین مثل بخش ایجاد مقاله که در قسمت قبل توضیح داده شد، به جای کلاس Request از TaskRequest استفاده می کنیم. برای دریافت مقادیر تسک هم همانطور که گفتیم از روش route model binding استفاده می کنیم.

پس به جای استفاده از id برای پیدا کردن تسکی که می خواهیم آن را ویرایش کنیم، از آبجکتی که لاراول پیشاپیش آن را پیدا کرده است استفاده می کنیم. البته فراموش نکنید که نام آبجکت حتما باید هم نام پارامتری باشد که در لیست روت ها تعریف شده است. بنابراین در اینجا نام آبجکت حتما باید $Task باشد. در غیر این صورت عملیات route model binding انجام نمی شود و پارامتر دوم همیشه خالی است.

برای ویرایش کردن تسک مانند بخش ایجاد تسک از روش mass assignment استفاده کرده و $request->all() را به متد update() ارسال می کنیم. در پایان نیز با استفاده از متدهای redirect() و back() به صفحه قبل باز می گردیم. کارهای لازم برای ویرایش تسک ها انجام شده است. کافی است برنامه را اجرا کرده و فرم ویرایش را پر کنید! فرم ویرایش شما آماده استفاده است!

حذف Task ها

خبر خوش اینکه شما به پایان پروژه مدیریت وظایف خود نزدیک می شوید! به عنوان آخرین بخش از عملیات CRUD به سراغ عمل حذف یا Delete می رویم. بنابراین دوباره ویو app.blade.php را باز کنید. در قسمت پایانی هر تسک یک فرم کوچک تعریف شده است که دکمه حذف تسک درون آن قرار دارد:

<form action="">
    وضعیت:
    <span class="task-status undone">انجام نشده</span> /
    <span class="edit">ویرایش</span> /
    <button type="submit" class="remove">حذف</button>
</form>

شاید بپرسید که چرا باید دکمه حذف تسک را درون یک فرم قرار دهیم؟ پاسخ این است که چون قصد داریم درخواست هایی از نوع DELETE ارسال کنیم، مجبوریم که از فرم استفاده کنیم. باید این فرم را بر طبق نیازهایمان تغییر دهیم. در مرحله اول باید اکشن فرم را تعیین کنیم. بنابراین از متد route استفاده می کنیم. کد زیر را به عنوان اکشن فرم وارد نمایید:

{{ route('Task.destroy',$task->id) }}

متد فرم را نیز به POST تغییر می دهیم. به یک یک فیلد csrf و یک فیلد method نیز احتیاج داریم. بنابراین کد زیر را درون فرم وارد می کنیم تا لاراول بقیه کارها را خود به عهده بگیرد!

{{ method_field('delete') }}
{{ csrf_field() }}

همانطور که مشاهده می کنید status یا وضعیت تسک در این فرم نمایش داده می شود. البته باید کاری کنیم که مقدار آن به صورت داینامیک و بر اساس هر تسک تغییر کند. بنابراین تگ span با کلاس task-status را به شکل زیر تغییر می دهیم:

<span class="task-status {{ $task->status }}">
    @php
        switch ($task->status) {
            case 'Undone':
                echo 'انجام نشده';
                break;
            case 'Done':
                echo 'انجام شده';
                break;
            case 'Cancel':
                echo 'صرف نظر شده';
                break;
            default:
                echo 'موکول شده';
                break;
        }
    @endphp
</span>

همانطور که می بینید برای قسمت کلاس span مستقیما از فیلد status تسک و برای متن داخل آن از یک شرط switch استفاده کردیم تا متن مناسب را بر اساس مقدار $task->status نمایش دهد. تا اینجا کار فرم حذف در بخش ویو به پایان رسیده است.

حال به متد destroy() در TaskController بروید و آن را به شکل زیر در آورید:

public function destroy(Task $Task)
{
    $Task->delete();
    return redirect()->back();
}

برای دریافت تسکی که باید حذف شود از روش route model binding و برای حذف هر تسک نیز از متد delete() الوکوئنت استفاده کرده ایم. در پایان نیز مثل همیشه با استفاده از متدهای redirect() و back() به صفحه قبل باز می گردیم. بخش حذف نیز آماده شده است! می توانید برای امتحان تسک های مختلفی را ایجاد و حذف کنید.

جمع بندی

به شما تبریک می گوییم! شما با موفقیت اولین اپلیکیشن تان را با لاراول ایجاد کردید! در اینجا سری آموزشی " آموزش ساخت اپلیکیشن مدیریت وظیفه با لاراول " به پایان رسید، اما شما می توانید کم کم به حجم دانسته های خود از لاراول افزوده و به تکمیل بخش های مختلف این پروژه ساده بپردازید. به عنوان مثال می توانید مدیریت زمان را نیز به امکانات مدیریت تسک ها اضافه کنید. حتما نظرات خود را در مورد این سری آموزشی با ما در میان بگذارید. در صورتی که در هر کجای این پروژه با مشکلی مواجه شدید مثل همیشه از پاسخگویی به سوالات شما خوشحال می شویم!

بیشتر مطالعه کنید : 

نویسنده

نظرات کاربران

پانل

خیلی مفید بود

<a href="http://sandwich-panelmammut.com/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86-%D9%BE%D8%A7%D9%86%D9%84-%D8%AF%DB%8C%D9%88%D8%A7%D8%B1%DB%8C/">ساندویچ پانل دیواری</a>
snape

ممنون از آموزشتون
لطفا کدهای پروژه رو برای دانلود هم قرار بدین
ممنون

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل