Cara Menampilkan Data Sesuai User yang Login di Laravel

wahyunanangwidodo

wahyunanangwidodo Kamis, 20 Mei 2021

Cara Menampilkan Data Sesuai User yang Login di Laravel

Berbagai macam metode bisa kita buat atau gunakan tentang bagaimana suatu data ditampilkan hanya kepada siapa yang memiliki data tersebut.

Seperti metode Auth untuk mengakses user yang login dan membuat kondisional untuk menampilkan setiap data yang diperuntukan atau dimiliki user tertentu atau yang sedang login pada aplikasi laravel kita.

Kita akan buat dan mempelajarinya. Sebagai contoh kita akan membuat aplikasi sederhana dengan sistem autentikasi dan sebuah form untuk insert data yang dapat digunakan oleh banyak user berbeda, seperti dibawah ini.

Cara Menampilkan Data Sesuai User yang Login di Laravel

Aplikasi Sederhana Laravel: Instalasi, Database, Migrasi

Mari kita membuatnya. Kita mulai dari instalasi laravel -- versi yang digunakan adalah laravel 8.

laravel new example-app
#atau
composer create-project laravel/laravel example-app

Selanjutnya buat database MySQL baru lalu kita atur pada file .env.

MariaDB [(none)]> create database db_example_app;
Query OK, 1 row affected (0.032 sec)
//.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_example_app
DB_USERNAME=root
DB_PASSWORD=

Kita buat buat file migrasi baru untuk kita tambahkan sebuah tabel.

php artisan make:model Post --migration

Buka file migrasi yang baru dibuat dan tambahkan kolom seperti dibawah ini.

//...create_posts_table.php
Schema::create('posts', function (Blueprint $table) {
   $table->id();
   $table->foreignId('user_id');
   $table->string('title');
   $table->text('body');
   $table->timestamps();
});

Kolom user_id akan menyimpan key / ID asing; yaitu ID dari user untuk kita buat relasi antara tabal posts dan tabel users.

Terakhir jalankan perintah migrasi.

php artisan migrate

Membuat Autentikasi Login dan Registrasi User

Kita akan gunakan scaffold starter kits laravel untuk membuat sistem atuentikasi agar lebih mudah dan cepat.

Silahkan jalankan pertintah dibawah ini secara berurutan.

composer require laravel/breeze --dev

php artisan breeze:install

npm install

npm run dev

php artisan serve

Setelah selesai kita buka http://localhost:8000/ pada browser dan silahkan lakukan registasi di http://localhost:8000/register dengan lebih dari satu user.

Cara Menampilkan Data Sesuai User yang Login di Laravel
MariaDB [db_example_app]> select id, name, email from users;
+----+-------+----------------+
| id | name  | email          |
+----+-------+----------------+
|  1 | user1 | user1@mail.com |
|  2 | user2 | user2@mail.com |
|  3 | user3 | user3@mail.com |
+----+-------+----------------+
3 rows in set (0.000 sec)

Membuat Data Baru

Kita lanjutkan untuk membuat proses insert data dan membuat halaman khusus dengan form input.

Kita mulai dari membuat sebuah Controller. Silahkan jalankan perintah dibawah ini.

php artisan make:controller PostController

Kemudian buka PostController.php dan buat seperti dibawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post; 
use Auth;

class PostController extends Controller
{
   public function create()
   {
       return view('post.create');
   }
   
   public function store(Request $request)
   {
 
       $post = new Post;
   
       $post->title = $request->title;
       $post->body = $request->body;
       $post->user_id = Auth::user()->id;
   
       $post->save();

       return back();

   }

}

Kita lihat Controller diatas. Pada create() method akan menampilkan halaman create yang ada di dalam folder post pada direktori views yang nanti kita buat. Lalu pada store() method, kita gunakan metode Auth untuk mengakses objek user yang login dan mengambil properti ID untuk value user_id.

Selanjutnya buat folder baru di direktori views dengan nama post dan tambahkan sebuah file create.blade.php didalamnya, lalu buat seperti dibawah ini.

//views/post/create.blade.php
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create New Post') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                <form method="POST" action="{{ route('store') }}">
            @csrf

            <!-- Title -->
            <div>
                <x-label for="title" :value="__('Title')" />
                <x-input id="title" class="block mt-1 w-full" type="text" name="title" :value="old('title')" required autofocus />
            </div>

            <!-- Body -->
            <div class="mt-4">
                <x-label for="body" :value="__('Body')" />
                <x-input id="body" class="block mt-1 w-full" type="text" name="body" :value="old('body')" required />
            </div>
  
            <div class="flex items-center justify-end mt-4">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('dashboard') }}">
                    	{{ __('Cancel ?') }}
                </a>

                <x-button class="ml-4">
                    	{{ __('Submit') }}
                </x-button>
            	</div>
        	</form>
               </div>
            </div>
        </div>
    </div>
</x-app-layout>

Setelah itu kita buka file route web.php dan tambahkan route dibawah ini.

use App\Http\Controllers\PostController;

Route::get('/post/create', [PostController::class, 'create'])->name('new-post');
Route::post('/post/store', [PostController::class, 'store'])->name('store');

Kemudian buka layouts > navigation.blade.php untuk kita tambahkan link navigasi.

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
       ...    
   <x-nav-link :href="route('new-post')" :active="request()->routeIs('new-post')">
       {{ __('Add New Post') }}
   </x-nav-link>
</div>

Simpan dan jalankan perintah php artisan serve. Sampai disini kita sudah bisa melakukan insert data, silahkan mencobanya.

Silahkan buat lebih dari satu data post dengan user yang berbeda.

Cara Menampilkan Data Sesuai User yang Login di Laravel
MariaDB [db_example_app]> select id, user_id, title, body from posts;
+----+---------+---------+--------+
| id | user_id | title   | body   |
+----+---------+---------+--------+
|  1 |       1 | Title 1 | body 1 |
|  2 |       1 | Title 2 | body 2 |
|  3 |       2 | Title 3 | body 3 |
|  4 |       3 | Title 4 | body 4 |
+----+---------+---------+--------+
4 rows in set (0.001 sec)

Menampilkan Data

Sekarang adalah bagaimana kita menampilkan data berdasarkan user tertentu, baik menampilkan data post sesuai user yang login atau menampilkan semua data post beserta user terkait.

Data sesuai user yang login

Yang perlu kita lakukan adalah mengetahui atau mengambil informasi user yang sedang login untuk dicocokan dengan data post yang dimilikinya.

Kita akan ambil semua data pada tabel posts untuk ditampilkan. Karena kita juga ingin menampilkan informasi user disetiap post, kita buat relasi pada model untuk dapat melakukan kueri tabel terkait.

Kita buka model Post.php dan tambahkan relasi belongsTo() seperti dibawah ini.

class Post extends Model
{
    use HasFactory;
    
    public function user()
    {
       return $this->belongsTo(User::class);
    }
}

Lihat postingan khusus belajar relasi eloquent laravel untuk mempelajari relasi lainnya di laravel.

Selanjutnya kita akan tampilkan data post yang dimiliki user yang login pada halaman dashbord. Silahkan buka route web.php dan buat seperti dibawah ini.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
use App\Models\Post; 
use App\Models\User; 


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

Route::middleware(['auth'])->group(function () {
    
    Route::get('/dashboard', function () {
        $posts = Post::with('user')->get();
        return view('dashboard', ['posts' => $posts]);
    })->name('dashboard');

    Route::get('/post/create', [PostController::class, 'create'])->name('new-post');
    Route::post('/post/store', [PostController::class, 'store'])->name('store'); 

});


require __DIR__.'/auth.php';

Selanjutnya buka file dashboard.blade.php dan kita buat loop foreach seperti dibawah ini.

<x-app-layout>
  <x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
      {{ __('Dashboard') }}
    </h2>
  </x-slot>
  <div class="py-8">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
      
        @foreach ($posts as $post)
        
        @if ($post->user->id == Auth::user()->id)
        <div class="p-6 bg-white border-b border-gray-200">
          <h1 class="text-2xl">{{ $post->title }}</h1>
          <p>by {{ $post->user->name }}</p>
        </div>
        @endif
        
        @endforeach
        
      </div>
    </div>
  </div>
</x-app-layout>

Di dalam @foreach diatas, kita buat kondisional @if dengan operator (==) menyandingkan data ID user yang login dengan ID user yang ada di setiap post.

Jika cocok (true) maka akan ditampilkan semua data yang sesuai. Hasilnya seperti gambar dibawah ini.

Cara Menampilkan Data Sesuai User yang Login di Laravel

Menampilkan semua data dan user terkait

Kita akan tambahkan sebuah halaman untuk menampilkan semua post yang ada, baik yang dimiliki user yang sedang login ataupun yang dimilki user lain.

Kita tambahkan file baru di folder post dengan nama posts.blade.php, lalu tambahkan html dengan foreach yang sama seperti dibawah ini; atau bisa copas dari dashboard.blade.php.

<x-app-layout>
  <x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
      {{ __('Posts') }}
    </h2>
  </x-slot>
  <div class="py-8">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        @foreach ($posts as $post)
         
        <div class="p-6 bg-white border-b border-gray-200">
          <h1 class="text-2xl">{{ $post->title }}</h1>
          <p>by {{ $post->user->name }}</p>
        </div>
         
        @endforeach
      </div>
    </div>
  </div>
</x-app-layout>

Disini kita hanya menghilangkan kondisional @if -nya saja, tanpa memfilter data post tertentu.

Selanjutnya tambahkan mothod baru pada PostController.php dengan pengambilan data dan relasi yang sama, seperti dibawah ini.

public function index()
{
    $posts = Post::with('user')->get();

    return view('post.posts', ['posts' => $posts]);
}

Kemudian buat route baru di route web.php. Letakan di dalam group middleware auth.

Route::get('/posts', [PostController::class, 'index'])->name('posts');

Tambahkan juga link navigasi-nya.

//navigation.blade.php
<x-nav-link :href="route('posts')" :active="request()->routeIs('posts')">
      {{ __('All Posts') }}
</x-nav-link>

Simpan dan lihat hasilnya pada browser. Hasilnya seperti gambar dibawah ini.

Cara Menampilkan Data Sesuai User yang Login di Laravel

Selesai

Demikian cara menampilkan data sesuai user yang login. Yang kita lakukan adalah mengakses user yang diatuentikasi dan melakukan filterisasi pada kueri data menggunakan kondisional dan mancari kesamaan nilai / value.

Silahkan dicoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.