View Layouts and Pagination in Laravel

Posted by

1. Create a Layout:

Create a layout file named admin.blade.php in the resources/views/layouts/ directory. This layout will contain the common structure of your pages.

<!-- resources/views/layouts/admin.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <!-- Add your CSS and JavaScript links here -->
</head>
<body>
    <header>
        <!-- Your header content goes here -->
    </header>
    <nav>
        <!-- Your navigation menu goes here -->
    </nav>
    <div class="content">
        @yield('content')
    </div>
    <footer>
        <!-- Your footer content goes here -->
    </footer>
</body>
</html>

2. Modify Your Create View:

Modify your create.blade.php view file to extend the admin layout and provide a title section.

<!-- resources/views/posts/create.blade.php -->
@extends('layouts.admin')

@section('title', 'Create a Blog Post')

@section('content')
    <!-- Your create post content goes here -->
    <form>
        <!-- Your form fields go here -->
    </form>
@endsection

3. List Posts (Index Page):

Create a new view file for listing posts, e.g., index.blade.php. Extend the admin layout, set the title, and define the content section.

<!-- resources/views/posts/index.blade.php -->
@extends('layouts.admin')

@section('title', 'Blog Posts')

@section('content')
    <!-- Your list of blog posts goes here -->
    @foreach($posts as $post)
        <!-- Display individual posts here -->
    @endforeach

    <!-- Pagination links go here -->
    {{ $posts->links() }}
@endsection

4. Define Routes:

Define routes for creating and listing blog posts in your web.php file.

// Define the route for creating a blog post
Route::get('posts/create', 'PostController@create')->middleware('auth');

// Define the route for listing blog posts
Route::get('posts', 'PostController@index')->middleware('auth');

5. Controller Methods:

In your PostController, add methods for creating and listing blog posts.

public function create()
{
    return view('posts.create');
}

public function index()
{
    // Fetch paginated blog posts (e.g., 10 posts per page)
    $posts = Post::paginate(10);

    return view('posts.index', compact('posts'));
}

6. Title Attribute for Posts:

In your Post model, define an accessor to generate the title for each post and a named route for viewing a single post.

// Post.php
public function getTitleAttribute()
{
    // Customize how you generate the title for each post
    return 'Blog Post: ' . $this->title;
}

// Define a named route for viewing a single post
Route::get('posts/{slug}', 'PostController@show')->name('posts.show');

7. View Single Post:

Create a view file named single.blade.php for viewing a single post.

<!-- resources/views/posts/single.blade.php -->
@extends('layouts.admin')

@section('title', $post->title)

@section('content')
    <!-- Display the single post content here -->
    <h1>{{ $post->title }}</h1>
    <p>{{ $post->content }}</p>
@endsection

In your PostController, add a method to display a single post.

public function show($slug)
{
    $post = Post::withSlug($slug)->firstOrFail();

    return view('posts.single', compact('post'));
}

8. Pagination Links:

Laravel’s pagination links are generated automatically when you use paginate(). Include {{ $posts->links() }} in your index.blade.php to display the pagination links.

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x