কিভাবে লারাভেল backend কে vue এর ফ্রন্টেন্ড এ কনভার্ট করবেন।

আজকের ক্লাসে আমাদের লারাভেল-কোর্সেস যে প্রজেক্ট টা ছিল সেই প্রজেক্ট টা frontend dynamic করা হবে যদিও আমরা একবার ডায়নামিক করেছি tailwind css blade file দিয়ে । যেহেতু আমরা frontend এ vue শিখতেছি তাই এখানে আমরা আবারো এই প্রজেক্ট টা vue.js দিয়ে dynamic করব।

-প্রথমেই আমাদের যে ফ্রন্টেন্ড html template টা ছিল সেটা আমরা github থেকে নিয়ে vue এর template এ convert করেছি এবং frontend template complete করার পর আমরা backend a apiController create করেছি।

যেহেতু আমাদের backend laravel দিয়ে করা আছে ।

-প্রথমেই আমরা আমাদের controller এর মধ্যে api folder make করে তার মধ্যে CourseController নামের একটা controller make করব।,

আমাদের কমান্ড লাইনে

php artisan make:controller api/CourseController

এই কমান্ড টি রান করলে আমাদের ফাইলটি তৈরি হয়ে যাবে এবং আমরা এখানে আমাদের frontend এ শো করানোর জন্য যে ফাংশন গুলো লাগে এখানে তৈরি করব ।

এবং আমাদের রাউট ফোল্ডার এর মধ্যে api.php এর মধ্যে আমাদের রাউট গুলো তৈরি করে নেব।

route- 

Route::get('/courses', [CourseController::class,'index']); Route::get('/course/{slug}', [CourseController::class,'single']); Route::get('/all-courses', [CourseController::class,'allCourses']);

CourseController

public function index(){ $courses = Course::latest()->take(12)->get(); return response()->json($courses); }

public function allCourses(Request $request){

$search = $request->search; $duration = $request->duraiton;

$courses = Course::where(function ($query) use ($request){ if(!empty($request->search)){ $query->where('name','like','%' . $request->search .'%'); }

if(!empty($request->duration)){ $duration =[]; if(in_array('1h-5h',$request->duration)){ $duration[] = 0; } if(in_array('5h-10h',$request->duration)){ $duration[] = 1; } if(in_array('10h+',$request->duration)){ $duration[] = 2; }

if(!empty($duration)){ $query->whereIn('duration',$duration); } }

if(!empty($request->platforms)){ $query->whereIn('platform_id',$request->platforms); }

})->paginate(12);

$platforms = Platform::select(['id','name'])->get(); $series = Series::select(['id','name'])->get();

return response()->json([ 'courses' => $courses, 'platforms' =>$platforms, 'series' => $series

]); }

public function single($slug){

$course = Course::where('slug',$slug)->first(); return response()->json($course);

}

এবার আমাদের বাকি কাজ frontend এ

এরজন্য প্রথমেই আপনাকে একটা প্রজেক্ট তৈরি করে নিতে হবে ।

কিভাবে আপনি একটা ভিউ প্রজেক্ট install করবেন?

-প্রথমে আপনাকে আপনার যে ডিরেক্টরি বা ফোল্ডার এর মধ্যে আপনার প্রজেক্ট তৈরি করতে চান সেখানে কমান্ড লাইন ওপেন করবেন।,এটা হতে পারে vs code অথবা cmd -এবার আপনি সেখানে আপনার প্রজেক্ট তৈরি করতে পারেন।

এ-বিষয়ে বিস্তারিত ব্লগ লেখা আছে আপনি চাইলে blog.shikhun.net এ গিয়ে আপনি সেখানে পড়ে নিতে পারেন।

https://blog.shikhun.net/install-process-tailwind-css-install-and-configure-vue-project-tailwind-css-install-project-file#heading-install-process

এবার আপনি আপনার প্রজেক্টে tailwind css install করেনিবেন সেটা সম্পর্কে বিস্তারিত ওপরের ব্লগে লেখা আছে।

--আরো বিস্তারিত ভাবে জানতে vue.org এর ডকুমেন্টেশন ফলো করতে পারেন।

-এবার আপনি আপনার প্রজেক্টের যে যে components আলাদা করে রাখতে চান সেগুলো আলাদা করে রাখবেন। -আর যে পেইজগুলো তৈরি করতে চান সেগুলো src/views এর মধ্যে করে রাখতে পারেন।

যেহেতু এটা প্রজেক্ট বেজ টিউটোরিয়াল তৈরি হচ্ছে তাই আর কোন টপিক নিয়ে বিস্তারিত আলোচনা নেই আপনি আমাদের কোর্সের এই ক্লাসের ভিডিও দেখলে বিস্তারিতভাবে জানতে পারবেন।

এরপরেও যদি কোন সমস্যা হয় আমাদের discord channel আছে সেখানে চাইলে জয়েন হতে পারেন।এবং আমাদের ফেইসবুক group আছে সেখানেও জয়েন হতে পারেন।

ধন্যবাদ।

Rakibul Islam