ক্লাস নং-২০(পার্ট-১১)- dynamically course create

আজকের ক্লাসে আমরা teacher assign করব course create করব dynamically and আরো কিছু থাকছে ।চলুন শুরু করি।

প্রথমেই আমাদের একটা resource রাউট তৈরি করতে হবে। এবং আমাদের যেহেতু courseController একটা রয়েছে তাই আমরা এটাকে resource route হিসেবে ব্যাবহার করব।resource route যে format follow করে আমরা সে অনুযায়ী কাজ করতে পারলেই হবে।যেমন function গুলোর নাম একই হতে হবে।(index,create,show,edit)

    Route::resource('course', CourseController::class);

এবার আমাদের বেশ কিছু livewire components লাগবে যেহেতু আমরা এটা দিয়েই dynamic করতেছি।

php artisan livewire:make CourseIndex
php artisan livewire:make CourseCreate
php artisan livewire:make CourseEdit

এবার আমাদের frontend এ শো করানোর জন্য blade file লাগবে যেহেতু আমাদের lead টা করা আছে ওই অনুযায়ী আমরা lead টা কে copy করে course name দিব। এবং আমাদের ফাইল টা file name অনুযায়ী ইডিট করে নেব।

এবার আমাদের controller এ ফাইল টা কে দেখিয়ে দিব।

  public function index() {
        return view('course.index');
    }

    public function create() {
        return view('course.create');
    }

এবার আমাদের livewire এর components এ যায় এবং আমরা আমাদের leadindex কে কপি করে courseindex এ দিয়ে প্রয়োজন মত মডিফাই করব।

এবার আমরা প্রথমেই coursecreate এ আসব।এবং আমাদের livewire frontend এ create.blade.php make করব। এবং আমাদের navigation এ গিয়ে আরেকটা course name এর মেনু তৈরি করতে হবে।

 <x-nav-link :href="route('course.index')" :active="request()->routeIs('course.index')">
   {{ __('Course') }}
 </x-nav-link>

এবার আমাদের course-create এ যে ফর্ম টা ব্যাবহার করব সেটা dynamic করে নেব।কারন একি ধরনের ফর্মা আমাদের কয়েকযায়গায় ব্যাবহার করা লাগছে। এরজন্য আমাদের components folder এর মধ্যে আমাদের একটা form-field নাম দিয়ে file make করি আপনারা চাইলেই আপনাদের মনের মত নাম দিতে পারেন।

<label for="{{ $name }}" class="lms-label">{{ $label }}</label>
@if ($type === 'textarea')
    <textarea wire:model.lazy="{{ $name }}" id="{{ $name }}" placeholder="{{ $placeholder }}" class="lms-input"
        {{ $required }}> </textarea>
@else
    <input wire:model.lazy="{{ $name }}" id="{{ $name }}" type="{{ $type }}"
        placeholder="{{ $placeholder }}" class="lms-input" {{ $required }}>
@endif

@error($name)
    <div class="text-red-500 text-sm mt-2">{{ $message }}</div>
@enderror

এখানে আমরা

• -name

• -label

• -placeholder

• এগুলো dynamic করে নেব।এবং আমাদের livewire এর course-create এ কোড গুলো লিখব।

<form wire:submit.prevent="formSubmit">
    <div class="mb-6">
        @include('components.form-field', [
            'name' => 'name',
            'label' => 'Name',
            'type' => 'text',
            'placeholder' => 'Enter name',
            'required' => 'required',
        ])
    </div>

    <div class="mb-6">
        @include('components.form-field', [
            'name' => 'description',
            'label' => 'Description',
            'type' => 'textarea',
            'placeholder' => 'Enter name',
            'required' => 'required',
        ])
    </div>

    <div class="mb-6">
        @include('components.form-field', [
            'name' => 'price',
            'label' => 'Price',
            'type' => 'number',
            'placeholder' => 'Add price',
            'required' => 'required',
        ])
    </div>

    <div class="flex mb-6 items-center">
        <div class="w-full mr-4">
            <label class="lms-label" for="days">Days</label>
            <div class="flex flex-wrap -mx-4">
                @foreach ($days as $day)
                    <div class="min-w-max flex items-center px-4">
                        <input wire:model.lazy="selectedDays" class="mr-2" type="checkbox" value="{{ $day }}"
                            id="{{ $day }}"> <label for="{{ $day }}">{{ ucfirst($day) }}</label>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="min-w-max mr-4">
            <div class="mb-6">
                @include('components.form-field', [
                    'name' => 'time',
                    'label' => 'Time',
                    'type' => 'time',
                    'placeholder' => 'Enter time',
                    'required' => 'required',
                ])
            </div>
        </div>

        <div class="min-w-max">
            <div class="mb-6">
                @include('components.form-field', [
                    'name' => 'end_date',
                    'label' => 'End date',
                    'type' => 'date',
                    'placeholder' => 'Enter end date',
                    'required' => 'required',
                ])
            </div>
        </div>
    </div>



    @include('components.wire-loading-btn')
</form>

এবার আমরা আমাদের courseCreate components এ গিয়ে আমাদের কোড গুলো লিখবো।

public $name;
    public $description;
    public $price;
    public $selectedDays = [];
    public $time;
    public $end_date;

    public $days = [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ];

    protected $rules = [
        'name' => 'required|unique:courses,name',
        'description' => 'required',
        'price' => 'required',
    ];


    public function formSubmit() {
        $this->validate();
        $course = Course::create([
            'name' => $this->name,
            'description' => $this->description,
            'price' => $this->price,
            'user_id' => Auth::user()->id
        ]);
        $course_id = $course->id;
        foreach($this->selectedDays as $day) {
            // check how many sunday available
            $i = 1;
            $start_date = new DateTime(Carbon::now());
            $end_date =   new DateTime($this->end_date);
            $interval =  new DateInterval('P1D');
            $date_range = new DatePeriod($start_date, $interval, $end_date);
            foreach ($date_range as $date) {
                if($date->format("l") === "Sunday"){ // Need to make Selected day Dynamic
                    $curriculum = Curriculum::create([
                        'name' => $this->name.' '.$i++,
                        'course_id' => $course_id,
                    ]);
                }
            }
            $i++;
        }

        flash()->addSuccess('Course created successfully');

        return redirect()->route('course.index');
    }


    public function render()
    {
        return view('livewire.course-create');
    }

যেহেতু আমরা এখানে validation দিয়েছি তাই আমরা চেক করে নিতে পারি এটা ঠিক ভাবে কাজ করছে কি না।এখানে ২ ধরনের validation আছে একটা normally frontend html validation required এটা যদি উঠিয়ে দিয়ে আমরা চেক করি তাহলে বুঝতে পারব আমাদের validation সঠিকভাবে কাজ করছে।

এবার আমরা এবার আমাদের cours make করার জন্য রেডি কিন্তু তার আগে একটা কাজ করতে হবে সেটা হল।আমাদের course যে মডেল টা আছে সেখানে আমাদের fillable property গুলো দিয়ে দিতে হবে নাহলে আমরা যখন course create করে submit করব তখন আমাদের এরর দেখাবে।

    protected $fillable = [
        'name',
        'description',
        'price',
        'user_id'
    ];

এখন আমাদের এটা রেডি। আমরা কোর্স তৈরি করতে পারব। এখানে একটা বিষয় আমরা আমাদের ফর্ম টা চেক করার জন্য আমাদের frontend এ যে validation দেওয়া আছে সেটা কে উঠিয়ে আমাদের server এর যে validation দেওয়া আছে সেটা দিয়ে চেক করে নেব।

যদিও আমাদের course create এর মধ্যে একটু critically কাজ গুলো করা আছে সেগুলো আমরা আস্তে আস্তে বোঝার চেষ্টা করি যদি না বুঝতে পারি আমাদের discord section তো আছেই।

video link : Class-20(part-11-video)

discord link: https://discord.gg/9qWUUbQ3

facebook group :https://web.facebook.com/groups/1661735757554627/