Laravel - 視圖：初學者指南

Hello there, future Laravel developers! Today, we're going to dive into one of the most exciting parts of Laravel - Views. Don't worry if you've never coded before; I'll walk you through everything step by step. By the end of this tutorial, you'll be creating beautiful web pages like a pro!

Laravel - Views

What are Views?

Views in Laravel are like the pretty face of your application. They're responsible for what your users actually see when they visit your website. Think of views as the HTML templates that present your data in a user-friendly way.

Creating Your First View

Let's start with a simple example. Imagine we want to create a welcome page for our website. Here's how we'd do it:

Navigate to the resources/views directory in your Laravel project.
Create a new file called welcome.blade.php.
Add the following code:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

This is a basic HTML structure with a warm welcome message. The .blade.php extension tells Laravel to use its templating engine, Blade, which we'll explore more later.

Rendering the View

Now that we have our view, let's display it when someone visits our website. In your routes/web.php file, add this code:

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

This tells Laravel: "When someone visits the homepage, show them the 'welcome' view."

Passing Data to Views

Views are great, but they become truly powerful when we can dynamically insert data into them. Let's see how we can do that.

Simple Data Passing

Imagine we want to personalize our welcome message. We can pass data to our view like this:

Route::get('/', function () {
$name = "Sarah";
return view('welcome', ['name' => $name]);
});

Now, let's update our welcome.blade.php to use this data:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

The {{ $name }} syntax is Blade's way of echoing data. When you visit the page now, you'll see "Hello, Sarah!" instead of "Hello, World!".

Passing Multiple Variables

We can pass as many variables as we need. Let's add a few more:

Route::get('/', function () {
$data = [
'name' => "Sarah",
'age' => 28,
'hobbies' => ['reading', 'coding', 'hiking']
];
return view('welcome', $data);
});

And update our view:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
<p>You are {{ $age }} years old.</p>
<p>Your hobbies are:</p>
<ul>
@foreach($hobbies as $hobby)
<li>{{ $hobby }}</li>
@endforeach
</ul>
</body>
</html>

Here, we've introduced a Blade directive @foreach to loop through the hobbies array. Blade makes it super easy to work with data in your views!

Sharing Data with All Views

Sometimes, you might want to share certain data with all views in your application. For example, you might want to display the current user's name in the navigation bar on every page.

Using View Composers

Laravel provides a feature called View Composers for this purpose. Here's how you can use it:

Create a new file app/Providers/ViewServiceProvider.php (if it doesn't exist already).
Add the following code:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;

class ViewServiceProvider extends ServiceProvider
{
public function boot()
{
View::composer('*', function ($view) {
$view->with('currentUser', 'John Doe');
});
}
}

'providers' => [
// Other providers...
App\Providers\ViewServiceProvider::class,
],

Now, $currentUser will be available in all your views!

Conclusion

Views are the heart of your Laravel application's user interface. They allow you to separate your presentation logic from your business logic, making your code cleaner and more maintainable. Remember, practice makes perfect, so don't be afraid to experiment with different layouts and data passing techniques!

Here's a quick reference table of the methods we've covered:

Method	Description
`view('name')`	返回一個視圖
`view('name', ['key' => 'value'])`	返回一個帶有數據的視圖
`View::composer('*', function)`	與所有視圖共享數據

Happy coding, and may your views always be breathtaking! ?

Credits: Image by storyset