Belajar Laravel 11 | 6. View Data

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 named index.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.