CRUD : PART 3 | Menampilkan Data Dari Database Dengan Laravel

Baringin
By -
0

 Cread Database


    Setelah kita selesai membuat database dan melakukan konfigurasi serta membuat seeder dengan laravel tentu saja data tersebut akan kita sajikan ke user agar user dapat melihat informasinya. Bagaimana data di tampilkan ke user? ada banyak cara, tergantung desain UI yang kita rancang. Namun disini kita tidak berfokus kepada UI tersebut akan tetapi lebih berfokus kepada teknik mengeluarkan data dan menampilkan ke view.

    Langkah pertama yang kita lakukan setelah membuat database dan seeder ( Bagi yang belum membuatnya silahkan buat database terlebih dahulu. Baca tutorial pada part sebelumnya). selanjutnya kita akan membuat controller untuk mengontrol program.

    Database yang kita rancang sebelumnya bernama db_latihanLaravel dengan satu tabel yaitu tabel koleksi. Mari kita buat controller terebih dahulu. Controller yang akan kita buat kita beri nama KoleksiController.

    Buka terminal dan ketikkan perintah berikut:

    

php artisan make:controller KoleksiController

Tekan Enter

    Buka App =>htpp=>Controller dan cari file KoleksiController

Tambahkan perintah berikut untuk menghubungkan ke model yang telah kita buat:

use Illuminate\Http\Request;
use App\Models\Koleksi; Memanggil Model Koleksi


    Selanjutnya kita akan membuat method di dalam class. Method tersebut kita beri nama index() dengan menambahkan data array di dalamnya. Perhatikan script berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Koleksi;

class KoleksiController extends Controller
{
    public function index()
    {
        $data = [
            'title' => 'Data Koleksi',
            'koleksi' => Koleksi::all()
        ];
        return view('koleksi', $data);
    }
}


    Disini kita belum memiliki view bernama koleksi. jadi kita perlu membuat view tersebut. Ketikan perintah berikut di terminal untuk membuat view koleksi:

    

php artisan make:view koleksi

    Tekan enter

        Buka folder Resource =>View dan buka file koleksi.blade.php. Mari kita buat UI untuk menampilkan data kita. Agar tampilan lebih menarik disini kita memanfaatkan framework bootstrap. Perhatikan script berikut:


<!DOCTYPE html>
<html lang="en">

<head>
    <title>CRUD Laravel</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>

<body class="bg-dark">
    <div class="container bg-white p-5 mt-5">
        <h3>{{ $title }}</h3>
        <table class="table table-striped border">
            <thead>
                <tr>
                    <th>NO</th>
                    <th>KODE</th>
                    <th>JUDUL</th>
                    <th>DESKRIPSI</th>
                    <th>GAMBAR</th>
                    <th>OPSI</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>9090</td>
                    <td>Komputer Grafik</td>
                    <td>Mempelajari ilmu komputer</td>
                    <td>default.jpeg</td>
                    <td>
                        <a href="" class="btn btn-info">Edit</a>
                        <a href="" class="btn btn-danger">Hapus</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <th>
                <td><a class="btn btn-outline-success" href=""> + Tambah Data </a></td>
                </th>
            </tfoot>
        </table>
    </div>
</body>

</html>

    

    Sekarang kita atur routenya. Buka folder Route dan buka file web.php. Ketikan kode berikut:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\KoleksiController; //Memanggila Kontroller Koleksi

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

    Kembali ke terminal dan ketikan perintah 

    

php artisan serve

    tekan enter

    Buka di browser alamat berikut

        

http://127.0.0.1:8000/

    Dan tampilan Koleksi anda sudah muncul.

    Tapi data yang ada di dalam database anda belum muncul. Sekarang kembali ke koleksi.blade.php dan rubahlah script di dalam tbody seperti berikut:

<tbody>
    {{ $no=1 }}
    @foreach( $koleksi as $k)
    <tr>
        <td>{{ $no++ }}</td>
        <td>{{ $k['kode'] }}</td>
        <td>{{ $k['judul'] }}</td>
        <td>{{ $k['deskripsi'] }}</td>
        <td>{{ $k['gambar'] }}</td>
        <td>
            <a href="" class="btn btn-info">Edit</a>
            <a href="" class="btn btn-danger">Hapus</a>
        </td>
    </tr>
    @endforeach
</tbody>

    $no=1 merupakan variabel yang memiliki nilai awal 1. Variabel ini berguna untuk membuat nomor di dalam tabel dimana akan ditampilkan dengan menggunakan metode pengulangan dengan menuliskan scirpt $no++ yang berarti akan ditampilkan nomor urut dari 1 sampai N.

    Sedangkan variabel $koleksi kita dapat dari nama variabel array yang ada di dalam KoleksiKontroller dan kemudian kita rubah index nya menjadi $b. Sedangkan nilai yang ada di dalam $b[...] merupakan nama field dari tabel di database.

Berikut Hasilnya:



    Yang jadi masalah sekarang adalah, yang tampil pada kolom gambar adalah nama gambar bukan gambar. Sedangkan yang kita inginkan bagaimana supaya gambar bisa tampil di dalam tabel tersebut. Nah bagaimana cara menampilkan gambar dari database? Tutorialnya akan kita buat pada kesempatan yang lain.

Post a Comment

0Comments

Post a Comment (0)