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, layout
lar yaratish va component
lardan 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.