Laravel 8 Views Explained 🎨🚀
In Laravel 8, views are used to separate the presentation layer from the application logic. Views contain HTML, CSS, and Blade templating syntax. They are stored in the resources/views/ directory.
1. Creating a Basic View
A view is a simple file with a .blade.php extension.
Example: Create a view
Go to resources/views/ and create a file:
File: resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h1>Welcome to Laravel 8!</h1>
</body>
</html>
Returning a View from a Route
Modify routes/web.php:
use Illuminate\Support\Facades\Route;
Route::get('/welcome', function () {
return view('welcome');
});
Now, visiting http://127.0.0.1:8000/welcome will show the welcome page.
2. Passing Data to a View
You can pass data from a controller or route to a view using the view() function.
Passing Data from Route
Route::get('/user', function () {
$name = "John Doe";
return view('user', ['name' => $name]);
});
File: resources/views/user.blade.php
<!DOCTYPE html>
<html>
<head>
<title>User Page</title>
</head>
<body>
<h1>Welcome, {{ $name }}</h1>
</body>
</html>
Visiting /user will display:
Welcome, John Doe
Passing Data from Controller
use App\Http\Controllers\UserController;
Route::get('/profile', [UserController::class, 'show']);
File: app/Http/Controllers/UserController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function show()
{
$user = "Jane Doe";
return view('profile', compact('user')); // Same as ['user' => $user]
}
}
File: resources/views/profile.blade.php
<h1>Hello, {{ $user }}</h1>
Visiting /profile will display:
Hello, Jane Doe
3. Blade Templating Engine
Laravel Blade allows you to write dynamic content inside views using special syntax.
a) Blade Echo Syntax ({{ }})
The {{ }} syntax is used for displaying dynamic content.
<h1>Hello, {{ $name }}</h1>
Output:
Hello, John Doe
b) Conditional Statements
Blade allows using if, else, and elseif:
@if($age >= 18)
<p>You are an adult.</p>
@else
<p>You are a minor.</p>
@endif
Output (if $age = 20):
You are an adult.
c) Loops (@foreach, @for, @while)
Using @foreach
<ul>
@foreach($users as $user)
<li>{{ $user }}</li>
@endforeach
</ul>
Output (if $users = ['Alice', 'Bob', 'Charlie']):
- Alice
- Bob
- Charlie
Using @for
@for($i = 1; $i <= 5; $i++)
<p>Number: {{ $i }}</p>
@endfor
Using @while
@php $i = 1; @endphp
@while($i <= 3)
<p>Count: {{ $i }}</p>
@php $i++; @endphp
@endwhile
4. Blade Layouts & Templates
Laravel allows creating layouts to avoid repeating HTML structures.
Step 1: Create a Layout
File: resources/views/layouts/master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div class="content">
@yield('content')
</div>
<footer>
<p>Footer Section</p>
</footer>
</body>
</html>
Step 2: Create a Child View
File: resources/views/home.blade.php
@extends('layouts.master')
@section('title', 'Home Page')
@section('content')
<p>Welcome to the Home Page!</p>
@endsection
Step 3: Define Route
Route::get('/home', function () {
return view('home');
});
Visiting /home will display the page inside the layout.
5. Including Partial Views
To reuse parts of views like headers and footers, use @include.
File: resources/views/partials/header.blade.php
<header>
<h1>Website Header</h1>
</header>
File: resources/views/about.blade.php
@include('partials.header')
<p>About Us Page</p>
This will include the header in the about.blade.php file.
6. Using Components
Blade allows creating reusable components.
Step 1: Create a Component
php artisan make:component Alert
This creates:
- View:
resources/views/components/alert.blade.php - Class:
app/View/Components/Alert.php
File: resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
Step 2: Use in a View
<x-alert type="success" message="Operation successful!" />
Output:
<div class="alert alert-success">
Operation successful!
</div>
7. Rendering JSON Data (For APIs)
If you need to return JSON instead of a view:
Route::get('/data', function () {
return response()->json([
'name' => 'Laravel',
'version' => '8'
]);
});
Output (Visiting /data):
{
"name": "Laravel",
"version": "8"
}
Conclusion
Laravel 8 views with Blade provide a powerful templating system, allowing dynamic content rendering, reusable layouts, and structured UI development. 🚀✨
Let me know if you need any clarifications! 😊
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.