লারাভেল প্রজেক্ট তৈরি করার পরবর্তী কাজ হচ্ছে এর ফোল্ডার স্ট্রাকচার এবং কোনটার কি কাজ তা জানা। এরপর  লারাভেল নিয়ে কাজ করার সময় সবার প্রথমেই যে দুইটা জিনিস জানা দরকার, তা হচ্ছে ভিউ এবং রুটস।

ভিউ হচ্ছে আমরা কোন ওয়েব অ্যাপের যে অংশটা দেখি তা। রুটস হচ্ছে URL। যেমন example.com এটা হচ্ছে মেইন রুট। example.com/store এর /store এটা হচ্ছে store রুট। ওয়েব সাইটের কোন রুট ভিজিট করলে কোন ভিউ দেখাবে, তাই রুটের মাধ্যমে বলে দেওয়া হয়। নরমালি আমাদের যাদের স্ট্যাটিক অ্যাপ তৈরি করার অভিজ্ঞতা রয়েছে, তারা আলাদা আলাদা ফাইল তৈরি করতাম। যেমন একটা ফাইল যদি store.html হতো, তখন example.com/store এ গেলে তখন store.html ফাইলটা দেখতে পেতাম। কিন্তু স্ট্যাটিক ফাইল দিয়ে বড় সড় ওয়েব সাইট তৈরি করা বলা যায় ওঁসম্ভবব। ডাইনামিক ওয়েব সাইটের ধারণা থেকে পিএইচপির উৎপত্তি। পিএইচপিতে সহজে কম সময়ের মধ্যে ওয়েব সাইট বা ওয়েব অ্যাপ তৈরি করার জন্য লারাভেলের উৎপত্তি। কিভাবে লারাভেল প্রজেক্ট তৈরি করতে হয়, তা জানা যাবে লারাভেল ইন্সটল এবং প্রজেক্ট তৈরি লেখা থেকে।

প্রজেক্ট তৈরি করার পরে তা  যে কোন আইডিই তে ওপেন করে লারাভেল প্রজেক্টে কাজ করতে পারি। আমি ব্যবহার করছি Visual Studio Code।

লারাভেল রুট

লারাভেলের রুট যে ফাইলে ডিফাইন করা হয় তা হচ্ছে প্রজেক্টের ভেতরের routes ফোল্ডারের web.php ফাইলে। এ ফাইলটা ওপেন করলে দেখতে পাবো:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

এখানে ‘/’ মানে হচ্ছে মূল ডোমেইন। যেমন localhost:800 বা প্রজেক্টের URL। তো এই মেইন রুট যখন ভিজিট করব, তখন এখানে বলে দিচ্ছে welcome ভিউ রিটার্ণ করতে। যা আমাদের লারাভেল প্রজেক্টের ডিফল্ট একটা ওয়েবপেইজ দেখায়ঃ

এই welcome ভিউটা হচ্ছে একটা php ফাইল। যার রয়েছে project>resources>views ফোল্ডারের ভেতরে। ফাইলটির নাম হচ্ছে welcome.blade.php। এখানে blade হচ্ছে পিএইচপি টেমপ্লেটিং ইঞ্জিন। যার মাধ্যমে ভিউ/HTML এর ভেতর পিএইচপি কোড লেখা যায়। যা সম্পর্কে আমরা পরে বিস্তারিত জানব। এখন এতটুকু জানি যে ভিউ যে কোন ভিউ তৈরি করতে হলে ফাইলের নামের পাশাপাশি .blade.php যুক্ত করতে হবে। আর এই ভিউ ব্যবহার করার জন্য ফুরো ফাইলের নাম এবং এক্সটেনশন দিতে হয় না রুট এ। ফাইলের নাম লিখলেই লারাভেল বুঝে নিবে কোন ভিউটা দেখাতে হবে।

welcome ফাইলের ভেতরের কোড গুলো মুছে আপনি যে কোন কোড দিয়ে দেখতে পারেন। কমান্ড লাইন থেকে প্রজেক্ট ডিরেক্টরিতে গিয়ে নিচের কমান্ড দিলে আমরা ব্রাউজার এ গিয়ে http://localhost:8000/ ঠিকানায় আমাদের প্রজেক্টি দেখতে পাবো। (এটি কনফিগার করে http://localhost:8000/ এর পরিবর্তে লারাভেল হার্ড ব্যবহার করে যে কোন নাম দেওয়া যাবে।)

php artisan serve

নতুন একটা রুট তৈরি করতে চাইলে, যেমন আমরা store নামে একটা পেইজ তৈরি করতে চাচ্ছি। যখন example.com/store এ যাবে, তখন একটা পেইজ দেখাবে, তার জন্য আমরা routes.php ফাইলে নিচের কোডটি যুক্ত করবঃ

Route::get('store', function () {
    return "<h1>This is will be store view.</h1>";
});

এখন যদি exaple.com/store এ ভিজিট করি, তাহলে This is will be store view. লেখাটি দেখব। এর মানে আমরা কোন রুটে ভিউ ফাইলের পরিবর্তে যে কোন ডেটাও দেখাতে পারি। এই store রুটের জন্য নতুন একটা ভিউ তৈরি করব। project>resources>views ফোল্ডারের ভেতর store.blade.php নামে নতুন একটা ফাইল তৈরি করে নেই। লারাভেল প্রজেক্টে ডিফল্ট ভাবে Tailwind CSS ব্যবহার করে। তবে আমরা সিম্পল একটা HTML ফাইল ভিউ হিসেবে ব্যবহার করবঃ

<!doctype html>

<head>
    <title>Laravel Demo</title>
</head>

<body>
    <h1>Hello, World!</h1>

</body>
</html>

রুটে text এর পরিবর্তে এই ভিউ রিটার্ণ করতে হবেঃ

Route::get('store', function () {
    return view('store');
});

যখন /store রুট এই ভিউতে আমরা ভিজিট করব, তখন উপরের ভিউ দেখতে পাবো। এভাবে আমরা যত ইচ্ছে তত গুলো রাউটস এবং ভিউ তৈরি করতে পারি। যেমন Store, About, Contact নামে তিনটা আলাদা আলাদা রুট তৈরি করে এবং আলাদা আলাদা ভিউ তৈরি করে দেখতে পারেন।

লেআউট

সব গুলো ফাইলে যদি আমরা ম্যানুয়ালি HTML লিখি, তাহলে কেমন হবে না? তাহলে তো আমাদের ডাইনামিক সাইটের দরকার ছিল না। সাধারণত সব গুলো ভিউ এর ন্যাভিগেশন, ফুটার একই থাকে। শুধু কন্টেন্ট পরিবর্তন হয়। আর এর সমাধান হচ্ছে Blade Templates। project> Resource > Views ফোল্ডারের ভেতর আমরা একটা ফোল্ডার তৈরি করব components নামে। এই ফোল্ডারের নাম গুরুত্বপূর্ণ। ল্যারাবেল components ফোল্ডারের ফাইল গুলোকে রিইউজেবল ব্লক হিসেবে ট্রিট করবে। যার ভেতর একটা ফাইল তৈরি করব layout.blade.php নামে। যার মধ্যে নিচের বা নিজের মত করে কিছু HTML কোড লিখব, যা আমাদের প্রজেক্টের মূল লেআউট বা স্ট্রাকচার হিসেবে কাজ করবেঃ

<!doctype html>

<head>
    <title>Laravel Demo</title>
</head>

<body>
    <main>
        {{ $slot }}
    </main>

</body>

</html>

এখানে ডাবল ব্র্যাকেটের মধ্যে $slot ভ্যারিয়েবল দিয়ে বুঝানো হয়েছে যে এখানে আমরা ভিউ কন্টেন্ট যোগ করব। এখন store.blade.php ফাইল ওপেন করে শুধু নিচের কোড লিখলেই হবেঃ

<x-layout>
    <h1>This will be our store page.</h1>
</x-layout>

এখানে <x-layout> ট্যাগ দিয়ে বলে দিচ্ছি যে layout.blade.php নামে একটা ফাইল রয়েছে, যার স্লট ভ্যারিয়েবলের মধ্যে এই <x-layout> ট্যাগের ভেতরের কন্টেন্ট গুলো যুক্ত করতে। ব্রাউজারে যদি example.com/store রুটে যাই, আমরা আউটপুট দেখব This will be our store page। এই পেইজের সোর্স যদি দেখি, দেখব layout.blade.php এর কোড ও যুক্ত হয়েছে।

web.php ফাইলে আরেকটা রুট যুক্ত করিঃ

Route::get('about', function () {
    return view('about');
});

resource > views ফোল্ডারে আরেকটা ফাইল যুক্ত করি about.blade.php নামেঃ

<x-layout>
    <h1>This will be our about page.</h1>
</x-layout>

এখন যদি ব্রাউজারে /about রুটে যাই, তাহলে দেখবঃ This will be our about page.

যদি এই পেইজের সোর্স দেখি, দেখব layout.blade.php এর কোড সহ আউটপুট দিচ্ছে।

ভিউ এবার একটু সুন্দর করার চেষ্টা করি। এর জন্য আমরা এখন সিম্পল বুটস্ট্র্যাপ ব্যবহার করব। layout.blade.php ফাইলে নিচের কোড গুলো লিখিঃ

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>

    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <a href="/" class="d-flex text-decoration-none">
                <span class="fs-4">Laravel Example</span>
            </a>
        </header>

        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">

              {{$slot}}

            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
        <script src="main.js"></script>
</body>
</html>

এবার about.blade.php তে নিচের কোড গুলো লিখিঃ

<x-layout>

    <h1 class="display-5 fw-bold">This is our About page.</h1>
    <p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    <button class="btn btn-primary btn-lg" type="button">Example button</button>

</x-layout>

এখন যদি আমরা /about রুট ব্রাউজারে দেখি, দেখব সুন্দর একটা ওয়েব পেইজ। একই ভাবে store.blade.php ফাইলও পরিবর্তন করতে পারেন।

এবার layout.blade.php ফাইলে বিভিন্ন রুটে যাওয়ার জন্য ন্যাভিগেশন যোগ করতে পারেন।

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

ডাইনামিক রুট

কিভাবে রুট তৈরি করতে হয়, আমরা তা জেনেছি। এবার জানব কিভাবে ডাইনামিক রুট তৈরি করা যায়।

যেমন আমাদের কাছে একটা ফ্রেন্ড লিস্ট ভিউ রয়েছে। ঐ লিস্টে ক্লিক করলে একজন ফ্রেন্ড এর বিস্তারিত জানা যাবে।

Route::get('/friends/{id}', function ($id) {
    return "Friends with id $id";
});

ব্রাউজারে যদি আমরা example.com/friends/1 এ যাই, তাহলে আমরা আউটপুট পাবো Friends with id 1।

রুট ইউআরএলে {} ব্র্যাকেটের মধ্যে যে কোন কিওয়ার্ড ব্যবহার করতে পারি। ঐ কিওয়ার্ড ব্যবহার করে ইউআরএলে

এখানে আমরা এখন একটা স্ট্রিং রিটার্ণ করেছি। এই আইডি আমরা কোন ভিউতে পাস করে ডেটাবেজ থেকে ঐ আইডি দিয়ে ফ্রেন্ড ফেচ করে তার ডিটেইলস দেখাতে পারব।