Belajar Laravel 11 | 6. View Data
Table of Contents
Introduction
In this tutorial, we will learn how to send data to a view in Laravel 11 through routes. This process is essential for building dynamic web applications, allowing you to display content such as posts in a user-friendly manner. By the end of this guide, you'll have a solid understanding of how to manage data flow within your Laravel application.
Step 1: Fixing Navigation
Before sending data to the view, ensure that your navigation is properly set up. This will help in accessing different parts of your application seamlessly.
- Check your route definitions in
web.php
. - Ensure that the links in your navigation bar point to the correct routes.
- Test navigation to confirm that it works as expected.
Step 2: Sending Posts Data to View
Next, we will send the posts data from the controller to the view.
- Open the controller where you want to fetch the posts.
- Fetch the posts from the database using Eloquent. For example:
$posts = Post::all();
- Pass the posts data to the view using the
view()
function:return view('articles.index', ['posts' => $posts]);
Step 3: Creating UI for Articles
Now, create the user interface for displaying your articles.
- In your
resources/views
directory, create a new file namedindex.blade.php
. - Use HTML and Blade syntax to structure your layout. Here’s a simple example:
<h1>Articles</h1> <ul> @foreach ($posts as $post) <li>{{ $post->title }}</li> @endforeach </ul>
Step 4: Creating an Array of Posts
If you need to create a static array of posts, you can do so directly in your controller.
- Define an array like this:
$posts = [ ['title' => 'First Post', 'content' => 'Content of the first post'], ['title' => 'Second Post', 'content' => 'Content of the second post'], ];
- Pass this array to the view similarly as shown previously.
Step 5: Changing Blog to Post
If your application initially referred to "blog," update it to "post" for consistency.
- Rename any relevant files, classes, or variables to reflect this change.
- Update references in your views and controllers.
Step 6: Utilizing Sent Posts Data
In your view, make sure to utilize the data that has been sent effectively.
- Access the posts data directly in your Blade template as shown earlier.
- Use other Blade directives like
@if
and@foreach
to conditionally render content.
Step 7: Creating a Single Post Page
To display a single post, you’ll need to set up a new route and view.
- Define a route for the single post in
web.php
:Route::get('/posts/{slug}', [PostController::class, 'show']);
- In your controller, fetch the single post by its slug:
public function show($slug) { $post = Post::where('slug', $slug)->first(); return view('articles.show', compact('post')); }
- Create a new view
show.blade.php
to display the details of the post:<h1>{{ $post->title }}</h1> <p>{{ $post->content }}</p>
Step 8: Converting ID to Slug
To make your URLs more user-friendly, convert IDs to slugs.
- In your
Post
model, add a method to generate slugs. - Update your database to include a
slug
column and populate it with unique values for each post.
Conclusion
In this tutorial, we've covered how to send data to views in Laravel, create a user interface for articles, and manage single post displays. These steps are crucial for building a functional web application using Laravel. Next, consider exploring more advanced topics such as routing parameters and middleware for enhanced application functionality.