Cara Menampilkan Data di Laravel - MySQL

Ada dua cara yang bisa kita coba untuk melakukan pengambilan data yang ada di database untuk kita tampilan kemudian.

Kita bisa menggunakan metode table dengan DB atau melalui model menggunakan metode all().

Contohnya adalah sebagai berikut:

Contoh data yang akan digunakan untuk diambil atau dilakukan query disini merupakan data yang telah dibuat sebelumnya di postingan Belajar Laravel Pemula: Cara Menyimpan Data ke Database MySQL; begitu juga dengan template blade, controller, model dan route.

MariaDB [laravel_app]> select * from posts;
+----+---------+--------+---------------------+---------------------+
| id | title   | body   | created_at          | updated_at          |
+----+---------+--------+---------------------+---------------------+
|  1 | Title 1 | body 1 | 2021-03-26 04:04:36 | 2021-03-26 04:04:36 |
|  2 | Title 2 | body 2 | 2021-03-26 04:05:22 | 2021-03-26 04:05:22 |
|  3 | Title 3 | body 3 | 2021-03-26 04:05:32 | 2021-03-26 04:05:32 |
+----+---------+--------+---------------------+---------------------+
3 rows in set (0.000 sec)

Menggunakan Database Queries

Pengambilan pertama kita akan coba menggunakan metode table dengan menentukan tabel apa yang akan di ambil yang ada di database.

Pada controller kita buat seperti dibawah ini.

<?php

namespace App\Http\Controllers;
...

use Illuminate\Support\Facades\DB;

class PostController extends Controller
{
  public function index()
  {
     $posts = DB::table('posts')->get();
        
     return response()->json([
         'posts' => $posts
     ], 200);
  }

  ...
}

Disini kita tidak menggunakan model dari tabel untuk melakukan query, tapi kita menggunakan DB atau database queries.

Kita akan coba membuat request di postman dengan membuat response berupa json dengan menampilkan data object.

Sebelum ke postman kita buat route terlebih dahulu. Buka web.php dan buat seperti dibawah ini.

<?php 
use App\Http\Controllers\PostController;

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

Sekarang jalankan php artisan serve dan buat request pada postman. Hasilnya akan seperti gambar dibawah.

Gunakan GET method dan url http://localhost:8000/posts.

Sampai disini kita berhasil membuat request mengambil dan menampilkan data yang ada di tabel 'posts' di postman dengan cara database queries menggunakan DB method.

Menggunakan Model

Sekarang kita coba untuk mengabil data pada database menggunakan model dari sebuah tabel.

Yang akan kita lakukan hanya akan memanggil model di controller dan menggunakan all() method.

Pada controller kita buat seperti dibawah ini.

...
use App\Models\Post;
...
public function index()
{ 
  $posts = Post::all();
 
  return response()->json([
     'posts' => $posts
  ], 200); 
}

Silahkan buka kembali postman dan submit ulang dengan permintaan yang sama.

Menampilkan Data

Setelah fungsi pengambilan telah dibuat, sekarang kita akan membuat halaman untuk menampilkan data yang ada dengan membuat loop menggunakan metode @foreach.

Mari kita buat sebuah file baru pada direktori views didalam folder post dengan nama index.blade.php, kemudian silahkan copas html dibawah ini.

//views/post/index.blade.php

@extends('layouts.app')

@section('title', 'Semua Post')

<style>
table,
td {
    border: 1px solid #333;
    text-align:center;
}

thead,
tfoot {
    background-color: #222;
    color: #fff;
}
th{
  width: 50%; 
}
button{
    background-color: #ff5346;
    color: #fff;
    border: none;
    border-radius: 2px;
}
</style>
@section('content')
<table>
    <thead>
        <tr>
            <th colspan="3">Semua Post</th>
        </tr>
    </thead>
    <tbody>
      @foreach ($posts as $post)
        <tr>
            <td>{{ $post->title}}</td>
            <td>{{ $post->body }}</td> 
        </tr>
      @endforeach
    </tbody>
</table> 
@endsection

Pembuatan desain tampilan atau layouts pada html diatas menggunakan template warisan / inheritance dimana section yang ada telah dibuat pada tutorial sebelumnya. Silahkan disesuaikan dan focus pada bagaimana menggunakan foreach diatas dan menampilkan value dari properti pada object yang ada.

Sebelum melihatnya pada browser, terlebih dahulu kita buka kembali controller dan ubah response pada index() method seperti dibawah ini untuk diarahkan ke halaman index.

public function index()
{ 
  $posts = Post::all(); 
        
  return view('post.index', ['posts' => $posts]); 
}

Jalankan php artisan serve dan buka halaman pada browser dengan url http://localhost:8000/posts. Hasilnya akan seperti gambar dibawah ini.

Sampai disini data telah berhasil ditampilkan. Silahkan dicoba.