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.

Disclaimer About Us