📘 Module 2: Bootstrap + HTML Integration

← Back to Course Outline

1. Add Bootstrap 5 for Frontend Design

Bootstrap යනු අපගේ වෙබ් අඩවියට අලංකාර පෙනුමක් ලබා දීමට භාවිතා කරන CSS framework එකකි. අපි මුලින්ම ප්‍රධාන layout file එකක් සාදා එයට Bootstrap එකතු කරමු.

resources/views/ ෆෝල්ඩරය තුල layouts නමින් නව ෆෝල්ඩරයක් සාදන්න. ඒ තුල app.blade.php නමින් file එකක් සාදන්න.

File: resources/views/layouts/app.blade.php


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POS System</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- Content will go here -->
        @yield('content')
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Create Basic Layout with Navigation Bar

දැන් අපි navigation bar එකක් එකතු කරමු. Code එක organize කරගැනීම සඳහා, navigation bar එක වෙනම file එකක තබමු. resources/views/layouts/ තුල navigation.blade.php නමින් file එකක් සාදන්න.

File: resources/views/layouts/navigation.blade.php


<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">POS System</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sales</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3. Dashboard Page & Blade Templates Usage

Navigation bar එක අපේ ප්‍රධාන layout එකට එකතු කිරීමට @include භාවිතා කරමු. app.blade.php file එක update කරන්න.

File: resources/views/layouts/app.blade.php (Updated)


...
<body>
    @include('layouts.navigation')

    <main class="container">
        @yield('content')
    </main>

    <!-- Bootstrap JS -->
...

දැන් අපි dashboard page එකක් නිර්මාණය කරමු. resources/views/ තුල dashboard.blade.php නමින් නව file එකක් සාදන්න.

File: resources/views/dashboard.blade.php


@extends('layouts.app')

@section('content')
    <h1>Welcome to the Dashboard</h1>
    <p>This is the main page of our POS System.</p>
@endsection

අවසාන වශයෙන්, මෙම view එක පෙන්වීමට route එකක් සකස් කරමු. routes/web.php file එක විවෘත කර default route එක වෙනස් කරන්න.

File: routes/web.php


use Illuminate\Support\Facades\Route;

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

දැන් http://127.0.0.1:8000 වෙත ගිය විට, navigation bar එක සහිත dashboard page එක පෙනෙනු ඇත.

4. Sinhala Explanation: Reusing Layouts

Layouts නැවත භාවිතා කිරීම (@extends, @yield, @include)

වෙබ් අඩවියක ඇති හැම page එකකම navigation bar, footer වැනි කොටස් පොදුවේ දක්නට ලැබේ. හැම page එකක් සඳහාම මේවා නැවත නැවත code කරනවා වෙනුවට, අපට පොදු template එකක් (layout) සාදා එය නැවත භාවිතා කළ හැක. Laravel Blade මගින් මෙය ඉතා පහසු කරයි.

  • @extends('layouts.app'): මෙයින් කියවෙන්නේ, "මෙම file එක layouts.app කියන layout එකේ කොටසක්" කියාය. එම layout එකේ ඇති සියලුම HTML, CSS මෙයටත් උරුම වේ.
  • @yield('content'): මෙය layout file එකේ තබන හිස්තැනක් (placeholder) වැනිය. @extends කරන file එකේ, මෙම නම ('content') සහිතව @section එකක් තුල ලියන code එක මෙම හිස්තැනට ඇතුලත් වේ.
  • @include('layouts.navigation'): මෙයින් කරන්නේ වෙනත් file එකක (navigation.blade.php) ඇති code එක ඒ අයුරින්ම මෙම ස්ථානයට ඇතුලත් කිරීමයි. මෙය code එක කුඩා කොටස් වලට කඩා, සංවිධානය කිරීමට උපකාරී වේ.