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! 😊

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us