🛠️ Current Laravel version: Laravel 12 (released February 24, 2025)
In the previous article, we covered installing Laravel 12, creating routes, controllers, and models. Now it’s time to move forward and learn how to display data on the frontend using Blade, Laravel’s built-in templating engine.
---
1. What is Blade?
Blade is Laravel’s powerful and lightweight template engine. It allows you to:
- Use dynamic data with `{{ }}`
- Define reusable layouts
- Write conditions and loops in views
- Keep your frontend code clean and structured
All Blade templates are stored in:
resources/views/
2. Creating Your First View
Create a file at:
resources/views/welcome.blade.php
```html
<!DOCTYPE html>
<html>
<head>
<title>My Laravel App</title>
</head>
<body>
<h1>Welcome to Laravel 12 🚀</h1>
</body>
</html>
Then, register a route in routes/web.php:
use Illuminate\Support\Facades\Route;
Route::get('/welcome', function () {
return view('welcome');
});Now visit:
https://127.0.0.1:8000/welcome3. Passing Data to a View
Inside a controller, pass variables to a view. Example:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HelloController extends Controller
{
public function index()
{
$name = "Mahmoud";
return view('hello', compact('name'));
}
}
Create the view at:
resources/views/hello.blade.php
<h1>Hello, {{ $name }} 👋</h1>
And in routes/web.php:
use App\Http\Controllers\HelloController;
Route::get('/hello', [HelloController::class, 'index']);
4. Using Layouts (Template Inheritance)
Create a layout file at:
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>My App Header</header>
<main>
@yield('content')
</main>
<footer>My App Footer</footer>
</body>
</html>
Now create a page that extends the layout:
resources/views/home.blade.php
@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to the Home Page</h1>
<p>This page is using the main layout.</p>
@endsection
5. Conditions and Loops in Blade
Blade lets you easily loop through data and add conditions.
Example in resources/views/posts.blade.php:
<h1>All Posts</h1>
<ul>
@foreach($posts as $post)
<li>{{ $post->title }}</li>
@endforeach
</ul>
@if(count($posts) === 0)
<p>No posts found.</p>
@endif
Controller example:
use App\Models\Post;
public function posts()
{
$posts = Post::all();
return view('posts', compact('posts'));
}
✅ Conclusion
With Blade, Laravel 12 gives you a clean way to build dynamic UIs:
- Display variables with {{ }}
- Organize your pages with layouts
- Add loops and conditions in your views
This is the natural next step after learning about routes, controllers, and models.