LARAVEL CRUD #3 - Menampilkan data dari database dengan Laravel 8

LARAVEL CRUD #3 - Menampilkan data dari database dengan Laravel 8

Dalam tutorial ini kita saya akan membahas tetang Menampilkan data dari database dengan Laravel 8. Sebelumnya kita sudah Membuat fungsi untuk Menambahkan data ke database dengan Laravel 8, sekarang kita akan menampilkannya di aplikasi web kita.

Untuk tutorial kali ini cukup mudah saja, jadi silahkan ikuti saja langkah-langkah dibawah ini :

  1. Index : Silahkan masuk ke controller yang sudah kita buat yaitu ProductController kemudian pergi ke fungsi public function index & masukan kode seperti dibawah ini :
     public function index()
        {
            $product = Product::latest()->get();
    
            return view('product.index', compact('product'));
        }

    Setelah kita mengarahkan function index ke folder Resource\View\details\index.blade.php. kita akan membuat file html nya. Silahkan kalian copy kode html nya dibawah ini, pada file index.blade.php kita akan memanggil variabel $product yang sudah kita compact pada function-nya dengan menggunakan foreach agar data yang akan ditampilkan berulang sebanyak data yang ada.


    <!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
            integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    
    
        <style>
            body {
                font-family: 'Montserrat', sans-serif;
            }
    
        </style>
    
        <title>Hello, world!</title>
    </head>
    
    <body>
    
        <div class="container mt-5">
            <h1 class="text-center mb-5">List Produk</h1>
            @if(Session::has('success'))
    
            <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{Session::get('success')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
    
            @endif
            <a href="{{ route('product.create') }}" class="btn btn-primary mb-3">Tambah Produk</a>
            <div class="card shadow-sm">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">NO</th>
                                <th scope="col">Name</th>
                                <th scope="col">Details</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- untuk penomoran -->
                            @php
                                $no = 1;
                            @endphp
    
                            <!-- untuk menampilkan data -->
                            @foreach ($product as $hasil)
                            <tr>
                                <th scope="row">{{ $no++ }}</th>
                                <td>{{ $hasil->name }}</td>
                                <td>{{ $hasil->details }}</td>
                                <td>
                                    <a href="" class="btn btn-success btn-sm">Edit</a>
                                    <button class="btn btn-danger btn-sm">Hapus</button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    
    
        <!-- Optional JavaScript; choose one of the two! -->
    
        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous">
        </script>
    
        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
        -->
    </body>
    
    </html>
    

    list produk

  2. Jika sudah mengikuti langkah satu dengan benar dan berhasil, maka pada langkah ini kita akan merubah sedikit apa yang sudah kita kerjakan pada function create tutorial part 2 Menambahkan data ke database dengan Laravel 8.

    Kode bawah ini merupakan kode yang sudah kita buat pada tutorial sebelumnya.

    return back()->with('success', 'Data berhasil di tambah');
    Ganti kode diatas seperti kode dibawah ini :
    // Kembalikan ke halaman index dan berikan pesan success "Data berhasil di tambah"
            return redirect()->route('product.index')->with('success', 'Data berhasil di tambah');
    Kode diatas akan mengarakan kita ke halaman index, jika data berhasil di tambah.
  3. Untuk hasil perubahannya akan seperti gambah dibawah ini :


Nah kurang lebih untuk tutorial Menampilkan data dari database dengan Laravel 8, jika teman-teman masih bingung silahkan langsung bertanya pada kolom komentar dibawah.

Silahkan ikuti terus part-part dari tutorial ini untuk belajar membuat crud dengan laravel 8 dengan baik. tutorial selanjutnya kita akan bahas tentang cara Mengedit data di database dengan Laravel 8 jadi jangan lupa pantau terus agar dapat mengikuti tutorial berikutnya.

Load comments