إنشاء واجهات Blade في Laravel

الدرس السادس: Blade Templates وViews في Laravel – بناء الواجهات الديناميكية

بعد أن تعلّمنا في الدرس الخامس كيفية إنشاء Controllers وربطها بالـ Routes، أصبح لدينا الآن جزء مهم من دورة الطلب داخل Laravel. فالـ Route يستقبل الرابط، والـ Controller يتعامل مع منطق الطلب، ولكن يبقى سؤال مهم:

كيف نعرض النتيجة للمستخدم داخل صفحة HTML منظمة وديناميكية؟

هنا يأتي دور Views وBlade Templates.

في Laravel يتم تخزين ملفات الواجهات عادةً داخل:

resources/views

وتستخدم Laravel لغة القوالب الخاصة بها والتي تسمى Blade. ملفات Blade تحمل الامتداد:

.blade.php

وتسمح لنا بكتابة HTML عادي، مع إضافة أوامر خاصة لعرض البيانات، وتنفيذ الشروط والحلقات، وإنشاء Layouts وComponents، والتعامل مع النماذج وغيرها. وتوضح وثائق Laravel 13 الرسمية أن Blade هو محرك القوالب المدمج في Laravel، وأن ملفات Blade تُخزن عادةً داخل resources/views.

في هذا الدرس سنتعلم Blade من البداية، وسنربطه بما تعلمناه سابقًا في Routes وControllers، حتى نصل في النهاية إلى بناء صفحة مقالات ديناميكية بسيطة.

ما هي View في Laravel؟

الـ View هي الجزء المسؤول عن عرض البيانات للمستخدم.

بمعنى آخر، عندما يقوم المستخدم بفتح صفحة معينة، لا نريد عادةً أن نكتب HTML كاملًا داخل Route أو Controller.

مثلًا، من الممكن أن نكتب:

Route::get('/about', function () {
    return '<h1>من نحن</h1>';
});

لكن هذه الطريقة غير مناسبة عندما تصبح الصفحة كبيرة.

تخيل أن الصفحة تحتوي على:

Header
Navigation
Footer
قائمة مقالات
صور
أزرار
نماذج
رسائل
بيانات قادمة من قاعدة البيانات

سيصبح وضع كل HTML داخل Route أمرًا صعبًا جدًا.

لذلك نضع HTML داخل View منفصلة:

resources/views/about.blade.php

ثم نطلب من Route أو Controller عرض هذه View.

الفكرة الأساسية هي:

Route
   ↓
Controller
   ↓
View
   ↓
HTML
   ↓
المستخدم

وهذا الفصل بين منطق التطبيق وواجهة العرض يجعل المشروع أكثر تنظيمًا وأسهل في التطوير.

ما هو Blade في Laravel؟

Blade هو محرك القوالب الذي يأتي مع Laravel.

يسمح لك بكتابة HTML مع استخدام صيغة بسيطة لعرض البيانات وتنفيذ بعض منطق العرض.

على سبيل المثال، يمكن أن يكون لدينا:

<h1>{{ $title }}</h1>

إذا كانت قيمة:

$title = 'نسور التقنية';

فستظهر للمستخدم:

نسور التقنية

Blade لا يجبرك على كتابة HTML بطريقة مختلفة، بل يمكنك استخدام HTML العادي إلى جانب أوامر Blade.

كما أن Laravel تقوم بتحويل قوالب Blade إلى PHP، وتتعامل مع تخزين النسخ المترجمة حتى لا يكون استخدام Blade عبئًا غير ضروري على التطبيق.

أين نضع ملفات Blade؟

توجد ملفات Views داخل:

resources/views

مثلًا:

resources/
└── views/
    ├── welcome.blade.php
    ├── home.blade.php
    ├── about.blade.php
    └── contact.blade.php

يمكنك إنشاء الملف يدويًا، كما يمكنك في Laravel استخدام Artisan لإنشاء View:

php artisan make:view home

وبذلك يتم إنشاء View باسم مناسب داخل مجلد Views.

لماذا ينتهي اسم الملف بـ .blade.php؟

إذا كان اسم الملف:

home.blade.php

فهذا يخبر Laravel بأن الملف عبارة عن Blade Template.

أما:

home.php

فهو ملف PHP عادي وليس Blade Template بالصيغة المعتادة.

لذلك عندما تنشئ View باستخدام Blade استخدم:

filename.blade.php

مثل:

home.blade.php
articles.blade.php
contact.blade.php

إنشاء أول View في Laravel

لنقم بإنشاء صفحة بسيطة.

داخل:

resources/views

أنشئ ملفًا باسم:

home.blade.php

ثم اكتب:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>الصفحة الرئيسية</title>
</head>
<body>

    <h1>مرحبًا بك في موقعي</h1>

    <p>هذه أول صفحة Blade في Laravel.</p>

</body>
</html>

الآن نحتاج إلى Route يعرض هذه الصفحة.

في:

routes/web.php

يمكنك كتابة:

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

لاحظ أننا كتبنا:

view('home')

ولم نكتب:

view('home.blade.php')

لأن Laravel تعرف تلقائيًا أن الملف موجود داخل:

resources/views

وأن امتداد Blade هو:

.blade.php

عرض View من Controller

في الدرس السابق تعلمنا أن Controller يمكن أن يعيد View.

مثلًا:

public function home()
{
    return view('home');
}

ثم Route:

use App\Http\Controllers\PageController;

Route::get('/', [PageController::class, 'home']);

وهنا تصبح دورة الطلب:

/
↓
Route
↓
PageController
↓
home()
↓
home.blade.php
↓
HTML

وهذا هو الأسلوب الذي سنستخدمه غالبًا في التطبيقات الحقيقية.

تمرير البيانات إلى View

القوة الحقيقية لـ Blade تظهر عندما نبدأ في إرسال بيانات ديناميكية إليها.

لنفترض أن Controller يحتوي على:

public function home()
{
    $title = 'نسور التقنية';

    return view('home', [
        'title' => $title
    ]);
}

يمكننا داخل:

resources/views/home.blade.php

كتابة:

<h1>{{ $title }}</h1>

فتظهر:

نسور التقنية

Laravel تسمح بتمرير البيانات إلى View من خلال الوسيط الثاني في view().

استخدام compact()

يمكنك أيضًا تمرير البيانات باستخدام:

public function home()
{
    $title = 'نسور التقنية';

    return view('home', compact('title'));
}

وهي طريقة شائعة ومختصرة.

إذا كان لديك:

$title = 'Laravel';
$description = 'تعلم Laravel بسهولة';

يمكنك كتابة:

return view('home', compact('title', 'description'));

وفي Blade:

<h1>{{ $title }}</h1>

<p>{{ $description }}</p>

عرض البيانات باستخدام {{ }}

من أهم الأشياء التي ستستخدمها في Blade هي:

{{ $variable }}

مثل:

<h1>{{ $title }}</h1>

<p>{{ $description }}</p>

يمكنك أيضًا الوصول إلى خصائص الكائنات:

<h2>{{ $article->title }}</h2>

أو عناصر Array:

<p>{{ $article['title'] }}</p>

Blade تقوم افتراضيًا بعمل HTML escaping للبيانات التي تعرضها باستخدام:

{{ }}

وهذا مهم جدًا عند التعامل مع البيانات التي قد تأتي من المستخدم، لأنه يساعد على الحماية من هجمات XSS.

الفرق بين {{ }} و {!! !!}

في Blade توجد طريقتان شائعتان لعرض البيانات.

الأولى:

{{ $content }}

والثانية:

{!! $content !!}

الأولى تقوم بعمل escaping تلقائي.

أما الثانية فتسمح بعرض HTML بدون escaping.

مثلًا:

$content = '<strong>Laravel</strong>';

عند كتابة:

{{ $content }}

سيظهر النص على أنه HTML مكتوب وليس كعنصر HTML.

أما:

{!! $content !!}

فسيتم تفسير:

<strong>Laravel</strong>

كـ HTML.

مهم جدًا: لا تستخدم {!! !!} مع محتوى يأتي من المستخدم إلا إذا كنت متأكدًا تمامًا من أن المحتوى آمن. توصي وثائق Laravel باستخدام الصيغة المهربة {{ }} عند عرض البيانات التي يوفرها المستخدم لتقليل مخاطر XSS.

الشروط في Blade

من أهم مميزات Blade إمكانية كتابة الشروط بطريقة سهلة.

بدلًا من كتابة PHP كامل، يمكنك استخدام:

@if
@elseif
@else
@endif

مثلًا:

@if ($isAdmin)
    <p>مرحبًا بك أيها المدير.</p>
@else
    <p>مرحبًا بك في الموقع.</p>
@endif

إذا كانت:

$isAdmin = true;

سيتم عرض الرسالة الأولى.

أما إذا كانت:

$isAdmin = false;

فسيتم عرض الرسالة الثانية.

مثال على @if

لنفترض أن لدينا:

$age = 20;

يمكننا كتابة:

@if ($age >= 18)
    <p>يمكنك الدخول.</p>
@else
    <p>الدخول غير مسموح.</p>
@endif

ويمكنك استخدام:

@elseif

أيضًا:

@if ($score >= 90)
    <p>ممتاز</p>
@elseif ($score >= 70)
    <p>جيد جدًا</p>
@elseif ($score >= 50)
    <p>جيد</p>
@else
    <p>يحتاج إلى تحسين</p>
@endif

Blade توفر أيضًا Directives أخرى مثل:

@unless
@isset
@empty

وهي اختصارات مفيدة لحالات شائعة في PHP.

استخدام @unless

إذا أردت تنفيذ شيء عندما يكون الشرط غير صحيح:

@unless ($isLoggedIn)
    <p>يرجى تسجيل الدخول.</p>
@endunless

وهي تشبه:

if (!$isLoggedIn)

لكن بصيغة Blade أكثر وضوحًا داخل القالب.

استخدام @isset

إذا كنت تريد التأكد من وجود متغير:

@isset($username)
    <p>مرحبًا {{ $username }}</p>
@endisset

أما إذا كنت تريد التعامل مع متغير فارغ، فيمكنك استخدام:

@empty($username)
    <p>لا يوجد اسم.</p>
@endempty

هذه الأدوات مفيدة خصوصًا عندما تكون البيانات اختيارية.

الحلقات في Blade

عندما نبدأ بجلب قائمة من المقالات أو المنتجات أو المستخدمين، سنحتاج إلى تكرار HTML لكل عنصر.

يمكنك استخدام:

@foreach
@endforeach

مثلًا:

@foreach ($articles as $article)
    <h2>{{ $article->title }}</h2>
@endforeach

إذا كان لدينا ثلاثة مقالات، فسيتم إنشاء HTML لكل مقال.

وهذا من أكثر الاستخدامات أهمية في تطبيقات Laravel.

مثال على قائمة مقالات

لنفترض أن Controller يرسل:

$articles = [
    'Laravel',
    'PHP',
    'MySQL'
];

return view('articles.index', compact('articles'));

داخل Blade:

<h1>المقالات</h1>

@foreach ($articles as $article)
    <h2>{{ $article }}</h2>
@endforeach

ستظهر:

المقالات

Laravel

PHP

MySQL

@forelse عندما تكون القائمة فارغة

من الأدوات المفيدة جدًا في Blade:

@forelse
@empty
@endforelse

مثلًا:

@forelse ($articles as $article)

    <h2>{{ $article->title }}</h2>

@empty

    <p>لا توجد مقالات حاليًا.</p>

@endforelse

الميزة هنا أنك لا تحتاج إلى كتابة:

@if (count($articles) > 0)

ثم كتابة foreach في مكان آخر.

Blade تتعامل مع الحالتين في قالب واحد. وتدعم Laravel 13 هذه الصيغة رسميًا ضمن Directives الخاصة بالحلقات.

المتغير $loop

عند استخدام:

@foreach ($articles as $article)

توفر Blade متغيرًا خاصًا يسمى:

$loop

ويمكنك استخدامه لمعرفة معلومات عن الدورة الحالية.

مثلًا:

@foreach ($articles as $article)

    <p>
        المقال رقم {{ $loop->iteration }}:
        {{ $article->title }}
    </p>

@endforeach

يمكن أن يكون الناتج:

المقال رقم 1: Laravel
المقال رقم 2: PHP
المقال رقم 3: MySQL

ويمكن أيضًا معرفة ما إذا كنت في أول أو آخر عنصر، وهو أمر مفيد في بناء القوائم الديناميكية.

إنشاء Layout رئيسي

تخيل أن موقعك يحتوي على عشرات الصفحات.

هل من المنطقي أن تكرر هذا الكود في كل صفحة؟

<!DOCTYPE html>
<html>
<head>
    ...
</head>

<body>

<header>
    ...
</header>

<nav>
    ...
</nav>

<main>
    محتوى الصفحة
</main>

<footer>
    ...
</footer>

</body>
</html>

بالطبع لا.

هنا تظهر أهمية Blade Layouts.

يمكننا إنشاء Layout رئيسي يحتوي على الهيكل المشترك للموقع، ثم تجعل الصفحات الأخرى تستخدمه.

إنشاء Layout باستخدام Template Inheritance

أنشئ المجلد:

resources/views/layouts

ثم ملف:

resources/views/layouts/app.blade.php

واكتب:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">

    <title>
        @yield('title')
    </title>
</head>

<body>

    <header>
        <h1>نسور التقنية</h1>
    </header>

    <nav>
        <a href="{{ route('home') }}">الرئيسية</a>
        <a href="{{ route('articles.index') }}">المقالات</a>
        <a href="{{ route('about') }}">من نحن</a>
    </nav>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>جميع الحقوق محفوظة.</p>
    </footer>

</body>
</html>

لاحظ أننا استخدمنا:

@yield('title')

و:

@yield('content')

هذه أماكن سيتم ملؤها من الصفحات التي تستخدم هذا Layout.

استخدام @extends

لنفترض أننا نريد إنشاء الصفحة الرئيسية:

resources/views/home.blade.php

بدلًا من كتابة HTML كامل، يمكننا كتابة:

@extends('layouts.app')

@section('title', 'الصفحة الرئيسية')

@section('content')

    <h2>مرحبًا بك في نسور التقنية</h2>

    <p>
        هذا هو محتوى الصفحة الرئيسية.
    </p>

@endsection

هنا:

@extends('layouts.app')

تعني أن هذه الصفحة تستخدم:

layouts/app.blade.php

ثم:

@section('title', 'الصفحة الرئيسية')

ترسل عنوان الصفحة إلى:

@yield('title')

أما:

@section('content')

فتحدد المحتوى الذي سيظهر داخل:

@yield('content')

وهذه من أهم أفكار Blade التي ستستخدمها في المشاريع الحقيقية.

لماذا Layouts مهمة؟

استخدام Layouts يمنع تكرار الكود.

بدلًا من أن يكون لديك:

home.blade.php
about.blade.php
contact.blade.php
articles.blade.php

وكل ملف يحتوي على Header وFooter كاملين، يمكنك وضع الهيكل المشترك في:

layouts/app.blade.php

ثم كل صفحة تحدد فقط محتواها الخاص.

وبالتالي إذا أردت تعديل:

Header

أو:

Footer

يمكنك تعديل مكان واحد بدلًا من عشرات الملفات.

تضمين ملفات صغيرة باستخدام @include

في بعض الأحيان لا تريد إنشاء Layout كامل، بل تريد إعادة استخدام جزء صغير من HTML.

مثل:

navbar
footer
sidebar
article-card
alert

يمكنك استخدام:

@include()

مثلًا أنشئ:

resources/views/partials/navbar.blade.php

واكتب:

<nav>
    <a href="/">الرئيسية</a>
    <a href="/articles">المقالات</a>
    <a href="/about">من نحن</a>
</nav>

ثم داخل الصفحة:

@include('partials.navbar')

سيتم إدراج محتوى:

partials/navbar.blade.php

داخل الصفحة الحالية.

وهذا مفيد جدًا لتقسيم الواجهات إلى أجزاء صغيرة.

تمرير بيانات إلى @include

يمكنك أيضًا تمرير بيانات:

@include('partials.article-card', [
    'article' => $article
])

ثم داخل:

article-card.blade.php

يمكنك استخدام:

<h2>{{ $article->title }}</h2>

<p>{{ $article->description }}</p>

وبذلك تستطيع إعادة استخدام نفس الجزء مع بيانات مختلفة.

Blade Components

إلى جانب @include وLayouts، يوفر Blade نظام Components لبناء أجزاء قابلة لإعادة الاستخدام.

مثلًا قد يكون لديك:

button
alert
card
input
modal

بدلًا من تكرار HTML في كل مكان، يمكنك إنشاء Component واستخدامه أكثر من مرة.

مثال مبسط:

<x-alert>
    تم حفظ المقال بنجاح.
</x-alert>

الفكرة هنا أن Component يصبح عنصرًا قابلًا لإعادة الاستخدام.

ومع نمو مشروعك ستصبح Components مفيدة جدًا لبناء واجهة منظمة وقابلة للصيانة. وثائق Laravel 13 تتضمن Components وSlots وطرق تمرير البيانات إليها كجزء أساسي من Blade.

@csrf داخل Forms

عندما نبدأ في بناء Forms وإرسال بيانات إلى Laravel، سنحتاج إلى الحماية من هجمات CSRF.

لذلك عند إنشاء Form يرسل طلبًا إلى التطبيق، من المعتاد استخدام:

@csrf

مثل:

<form method="POST" action="/articles">

    @csrf

    <input type="text" name="title">

    <button type="submit">
        حفظ المقال
    </button>

</form>

تقوم:

@csrf

بإنشاء حقل مخفي يحتوي على CSRF Token الذي تستخدمه Laravel للتحقق من أن الطلب قادم بطريقة صحيحة.

سنشرح Forms وValidation وCSRF بشكل أوسع في الدروس القادمة، لكن من المهم أن تتعرف على هذه الصيغة من الآن.

استخدام @method

HTML Forms تدعم بشكل مباشر:

GET
POST

لكن تطبيقات Laravel تحتاج أيضًا إلى:

PUT
PATCH
DELETE

عند التعامل مع Resource Controllers.

لذلك يمكن استخدام:

@method('PUT')

مثل:

<form method="POST" action="/articles/10">

    @csrf
    @method('PUT')

    <input type="text" name="title">

    <button type="submit">
        تحديث
    </button>

</form>

سنستخدم هذه الطريقة لاحقًا عندما نبني عمليات CRUD كاملة.

التعامل مع أخطاء Validation

عندما نصل إلى التحقق من البيانات، قد نحتاج إلى عرض رسالة خطأ بجانب حقل معين.

Blade توفر Directive مفيدة جدًا لهذا الغرض:

@error
@enderror

مثلًا:

<label for="email">البريد الإلكتروني</label>

<input
    type="email"
    name="email"
    id="email"
>

@error('email')
    <p>{{ $message }}</p>
@enderror

إذا كانت هناك مشكلة في حقل email، يمكن عرض رسالة الخطأ.

سنتوسع في Validation في درس مستقل، لكن معرفتك بـ @error الآن ستجعل الانتقال إلى Forms أسهل.

بناء صفحة مقالات باستخدام Blade

لنطبق ما تعلمناه في مثال واحد.

لدينا Controller:

<?php

namespace App\Http\Controllers;

class ArticleController extends Controller
{
    public function index()
    {
        $articles = [
            [
                'title' => 'ما هو Laravel؟',
                'description' => 'مقدمة إلى Laravel ومميزاته.'
            ],
            [
                'title' => 'Routing في Laravel',
                'description' => 'تعلم كيفية إنشاء Routes.'
            ],
            [
                'title' => 'Controllers في Laravel',
                'description' => 'تعلم كيفية إنشاء Controllers.'
            ]
        ];

        return view('articles.index', compact('articles'));
    }
}

ثم Route:

use App\Http\Controllers\ArticleController;

Route::get('/articles', [ArticleController::class, 'index'])
    ->name('articles.index');

ثم أنشئ:

resources/views/articles/index.blade.php

واكتب:

@extends('layouts.app')

@section('title', 'المقالات')

@section('content')

    <h1>المقالات</h1>

    @forelse ($articles as $article)

        <article>
            <h2>{{ $article['title'] }}</h2>

            <p>
                {{ $article['description'] }}
            </p>
        </article>

    @empty

        <p>لا توجد مقالات حاليًا.</p>

    @endforelse

@endsection

الآن أصبح لدينا تطبيق صغير يعمل بهذا الشكل:

/articles
    ↓
Route
    ↓
ArticleController
    ↓
index()
    ↓
$articles
    ↓
articles/index.blade.php
    ↓
HTML

وهذا هو الربط الذي نريد أن تتقنه في هذه المرحلة من الكورس.

تنظيم مجلد Views

مع نمو التطبيق، لا تضع جميع Views داخل مجلد واحد.

مثلًا:

resources/views/
│
├── layouts/
│   └── app.blade.php
│
├── partials/
│   ├── navbar.blade.php
│   └── footer.blade.php
│
├── articles/
│   ├── index.blade.php
│   ├── show.blade.php
│   ├── create.blade.php
│   └── edit.blade.php
│
├── products/
│   ├── index.blade.php
│   └── show.blade.php
│
├── users/
│   ├── index.blade.php
│   └── profile.blade.php
│
└── home.blade.php

هذا التنظيم يجعل العثور على الملفات أسهل بكثير.

الوصول إلى Views داخل مجلدات

إذا كان لديك:

resources/views/articles/index.blade.php

يمكنك عرضها باستخدام:

return view('articles.index');

وليس:

return view('articles/index.blade.php');

استخدام النقطة:

هو الطريقة المعتادة للإشارة إلى المجلدات داخل أسماء Views.

مثلًا:

resources/views/admin/users/index.blade.php

يمكن الوصول إليها باستخدام:

return view('admin.users.index');

أخطاء شائعة في Blade

نسيان امتداد .blade.php

تأكد من أن الملف:

home.blade.php

وليس:

home.blade

أو:

home.php

إذا كنت تريد استخدام Blade.

خطأ في اسم View

إذا كتبت:

return view('articles.index');

فتأكد من وجود:

resources/views/articles/index.blade.php

استخدام متغير غير موجود

إذا كتبت:

<h1>{{ $title }}</h1>

فيجب أن يكون Controller قد أرسل:

$title

إلى View.

نسيان إغلاق Directive

إذا كتبت:

@if ($isAdmin)

فيجب أن تغلقها:

@endif

وبالنسبة إلى:

@foreach

تحتاج إلى:

@endforeach

وهكذا.

استخدام HTML غير موثوق باستخدام {!! !!}

لا تستخدم:

{!! $content !!}

مع محتوى المستخدم دون فهم المخاطر الأمنية.

استخدم:

{{ $content }}

في الحالات المعتادة.

أفضل الممارسات عند استخدام Blade

افصل منطق التطبيق عن الواجهة
اجعل View مسؤولة عن العرض
استخدم Layouts
استخدم @include للأجزاء المتكررة
حافظ على أسماء منظمة

افصل منطق التطبيق عن الواجهة

لا تجعل Blade مكانًا لتنفيذ عمليات معقدة على قاعدة البيانات.

لا تكتب مثلًا استعلامات قاعدة البيانات داخل View.

الأفضل أن تكون البيانات جاهزة من Controller أو الطبقات المناسبة، ثم تقوم Blade بعرضها.

اجعل View مسؤولة عن العرض

View وظيفتها الأساسية:

عرض البيانات

وليس:

إدارة منطق التطبيق بالكامل

استخدم Layouts

إذا كان لديك Header وFooter مشتركان، لا تكرر الكود في كل صفحة.

استخدم:

@extends()
@section()
@yield()

أو Components عندما تكون مناسبة.

استخدم @include للأجزاء المتكررة

مثل:

Navbar
Footer
Sidebar
Cards
Alerts

حافظ على أسماء منظمة

استخدم:

articles.index
articles.show
articles.create
articles.edit

بدلًا من أسماء عشوائية.

تمرين عملي

حان الآن وقت التطبيق.

قم بإنشاء View جديدة باسم:

resources/views/about.blade.php

واجعلها تستخدم Layout:

layouts.app

ثم أضف:

@section('title', 'من نحن')

واكتب داخل المحتوى:

من نحن

ثم أضف فقرة تعريفية عن موقعك.

بعد ذلك قم بإنشاء Controller باسم:

AboutController

واجعل Method باسم:

index()

تعيد View:

return view('about');

ثم أنشئ Route:

Route::get('/about', [AboutController::class, 'index'])
    ->name('about');

بعد ذلك جرّب إضافة متغير من Controller:

$siteName = 'نسور التقنية';

وإرساله إلى View.

ثم اعرضه باستخدام:

{{ $siteName }}

وأخيرًا أضف قائمة بسيطة من ثلاثة عناصر إلى Controller:

$topics = [
    'Laravel',
    'PHP',
    'MySQL'
];

ثم استخدم:

@foreach ($topics as $topic)
    <li>{{ $topic }}</li>
@endforeach

بهذا التمرين تكون قد استخدمت معظم المفاهيم الأساسية التي تعلمناها في الدرس.

العلاقة بين Route وController وBlade

بعد إنهاء هذا الدرس، يجب أن تكون قادرًا على فهم هذه الصورة:

المستخدم
   ↓
URL
   ↓
Route
   ↓
Controller
   ↓
Data
   ↓
Blade View
   ↓
HTML
   ↓
المتصفح

مثلًا:

/articles

يصل إلى:

ArticleController@index

ثم يقوم Controller بتجهيز:

$articles

ثم:

return view('articles.index', compact('articles'));

ثم تستقبل Blade:

@foreach ($articles as $article)
    ...
@endforeach

وفي النهاية يتم إنشاء HTML وإرساله إلى المتصفح.

هذه الدورة هي من أهم الأشياء التي يجب أن تفهمها قبل الانتقال إلى قاعدة البيانات وEloquent.

في هذا الدرس تعرفنا على Views وBlade Templates في Laravel، وهما من أهم الأجزاء التي ستستخدمها لبناء واجهات التطبيقات.

تعلمنا أن Views توجد عادةً داخل:

resources/views

وأن ملفات Blade تستخدم الامتداد:

.blade.php

وتعلمنا كيفية إنشاء View وعرضها باستخدام:

return view('home');

ثم تعلمنا كيفية تمرير البيانات من Controller إلى View:

return view('home', [
    'title' => $title
]);

وكذلك باستخدام:

compact()

وتعلمنا عرض البيانات باستخدام:

{{ $variable }}

مع فهم أهمية HTML escaping والحذر عند استخدام:

{!! !!}

ثم تعرفنا على أهم Directives الخاصة بالشروط:

@if
@elseif
@else
@endif

والحلقات:

@foreach
@forelse
@endforeach

كما تعرفنا على:

@isset
@empty
@unless

ثم انتقلنا إلى موضوع مهم جدًا وهو Layouts باستخدام:

@extends
@section
@yield

وتعلمنا كيف يمكننا استخدام Layout رئيسي بدل تكرار Header وFooter في جميع الصفحات.

كما تعرفنا على:

@include

لإعادة استخدام أجزاء من الواجهة، وأخذنا فكرة أولية عن Blade Components.

وتعرفنا أيضًا على:

@csrf

و:

@method()

عند التعامل مع Forms والطلبات المختلفة، بالإضافة إلى:

@error

لعرض رسائل التحقق.

وأصبح لدينا الآن تصور واضح عن العلاقة بين أجزاء التطبيق:

Route
↓
Controller
↓
View
↓
Blade
↓
HTML
↓
Browser

وهذه المعرفة ستكون أساسًا مهمًا جدًا عندما نبدأ في الدروس القادمة بالتعامل مع Requests وForms وValidation، ثم ننتقل بعدها إلى Database وMigrations وModels وEloquent لبناء تطبيقات Laravel حقيقية تتعامل مع البيانات.

الدرس السادس: Blade Templates وViews في Laravel – بناء الواجهات الديناميكية

ما هي View في Laravel؟

ما هو Blade في Laravel؟

أين نضع ملفات Blade؟

لماذا ينتهي اسم الملف بـ .blade.php؟

إنشاء أول View في Laravel

عرض View من Controller

تمرير البيانات إلى View

استخدام compact()

عرض البيانات باستخدام {{ }}

الفرق بين {{ }} و {!! !!}

الشروط في Blade

استخدام @unless

استخدام @isset

الحلقات في Blade

المتغير $loop

إنشاء Layout رئيسي

إنشاء Layout باستخدام Template Inheritance

استخدام @extends

لماذا Layouts مهمة؟

تضمين ملفات صغيرة باستخدام @include

تمرير بيانات إلى @include

Blade Components

@csrf داخل Forms

استخدام @method

التعامل مع أخطاء Validation

بناء صفحة مقالات باستخدام Blade

تنظيم مجلد Views

الوصول إلى Views داخل مجلدات

أخطاء شائعة في Blade

أفضل الممارسات عند استخدام Blade

افصل منطق التطبيق عن الواجهة

اجعل View مسؤولة عن العرض

استخدم Layouts

استخدم @include للأجزاء المتكررة

حافظ على أسماء منظمة

العلاقة بين Route وController وBlade

سجى الصادق محمد

AM VIIP

Nusur Tech

محمد تركي العلوش

Default