Laravel: 0 dan Pro gacha – 2-qism: Blade bilan Frontendni boshlash

Quyida maqola shaklida yozilgan kontentni topasiz. Siz buni .blade.php, .md yoki oddiy HTML formatda ishlatishingiz mumkin.


📘 Kirish

Laravel’da Frontend yaratishda eng asosiy vositalardan biri bu — Blade templating engine. Blade orqali siz HTML va PHP kodlarini oson aralashtira olasiz, sahifa qismlarini modular qilish, layoutlar yaratish va componentlardan foydalanish mumkin.

Ushbu maqolada siz quyidagilarni o‘rganasiz:

  • Blade fayl tuzilmasi

  • Layout va @yield, @section

  • Include qilish (@include)

  • Blade sintaksisi asoslari ({{ }}, @if, @foreach)


📂 Blade fayllari qayerda saqlanadi?

Laravel’da Blade fayllari resources/views papkasi ichida joylashadi.

Misol:

resources/views/welcome.blade.php

.blade.php — bu Laravel’ga bu fayl Blade shablon ekanligini bildiradi.


🧱 Layout yaratish

Laravel’da layout degani — bitta umumiy HTML qism bo‘lib, unga boshqa sahifalar o‘z kontentini joylaydi. Bu kodni takrorlamaslik uchun kerak bo‘ladi.

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

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

🧩 Sahifa yaratish va layoutdan foydalanish

Endi biror sahifa yaratamiz, masalan: home.blade.php

@extends('layouts.app')

@section('title', 'Bosh sahifa')

@section('content')
    <h1>Assalomu alaykum, Laravel!</h1>
    <p>Bu sahifa Blade layout orqali yaratilgan.</p>
@endsection

🔄 Include: komponent yoki qismni chaqirish

Agar siz header, footer yoki navbar’ni alohida fayl qilib saqlasangiz, @include yordamida boshqa sahifalarga qo‘shishingiz mumkin.

@include('partials.navbar')

🧠 Blade sintaksis asoslari

{{-- Ma'lumot chiqarish --}}
<h1>{{ $name }}</h1>

{{-- Shart operatori --}}
@if($user->isAdmin())
    <p>Admin panelga hush kelibsiz</p>
@endif

{{-- Sikl--}}
@foreach($posts as $post)
    <li>{{ $post->title }}</li>
@endforeach

📌 Xulosa

Blade orqali Frontendni modullar asosida qurish imkoniyati juda qulay. Aynan layout, include va section’lar orqali siz bir necha sahifali loyiha tuzishni boshlashingiz mumkin.


Agar tayyor bo‘lsangiz, 3-qismda Routing va Controller’lar bilan tanishamiz.