Cara menampilkan data laravel #6

Cara menampilkan data laravel 11

Pada artikel kali ini, saya akan menampilkan tutorial cara menampilkan data pada laravel. Menampilkan data juga sama pentingnya dengan menambahkan, mengedit, dan menghapus data. Menampilkan data juga termasuk dalam bagian CRUD. Untuk itu kita langsung masuk ke tutorialnya.

Buka file ProjekController.php kalian dan tambahkan baris skrip baru dibawah ini:


<?php

namespace App\Http\Controllers;

use App\Models\Projek; 
use Illuminate\View\View;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use Illuminate\Support\Facades\Storage;

class ProjekController extends Controller
{
    public function index(Request $request): View
    {
        $search = $request->input('search');
        $query = Projek::query();

        if ($search) {
            $query->where('nama', 'LIKE', "%{$search}%")
                ->orWhere('kelas', 'LIKE', "%{$search}%")
                ->orWhere('jurusan', 'LIKE', "%{$search}%");
        }

        $projek = $query->orderBy('nama', 'asc')->paginate(10);
        if ($projek->isEmpty() && $search) {
            session()->flash('error', 'Data tidak ditemukan.');
        }

        if ($request->fullUrl() != session('previous_url')) {
            session(['previous_url' => url()->previous()]);
        }

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

    public function create(): View
    {
        return view('projek.create');
    }

    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'foto'         => 'required|image|mimes:jpeg,jpg,png|max:2048',
            'nama'         => 'required|string|max:255',
            'kelas'        => 'required|numeric',
            'jurusan'      => 'required|string|max:255'
        ]);

        $image = $request->file('foto');
        $image->storeAs('public/images/projek', $image->hashName());

        Projek::create([
            'foto'          => $image->hashName(),
            'nama'          => $request->nama,
            'kelas'         => $request->kelas,
            'jurusan'       => $request->jurusan,
        ]);

        return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }

    public function show(string $id): View
    {
        $projek = Projek::findOrFail($id);

        return view('projek.show', compact('projek'));
    }

    public function edit(string $id): View
    {
        $projek = Projek::findOrFail($id);

        return view('projek.edit', compact('projek'));
    }

    public function update(Request $request, $id): RedirectResponse
    {
        $request->validate([
            'foto'         => 'image|mimes:jpeg,jpg,png|max:2048',
            'nama'         => 'required|string|max:255',
            'kelas'        => 'required|numeric',
            'jurusan'      => 'required|string|max:255'
        ]);

        $projek = Projek::findOrFail($id);

        if ($request->hasFile('foto')) {
            $image = $request->file('foto');
            $image->storeAs('public/images/projek', $image->hashName());

            Storage::delete('public/images/projek/' . $projek->foto);

            $projek->update([
                'foto'          => $image->hashName(),
                'nama'          => $request->nama,
                'kelas'         => $request->kelas,
                'jurusan'       => $request->jurusan,
            ]);
        } else {
            $projek->update([
                'nama'          => $request->nama,
                'kelas'         => $request->kelas,
                'jurusan'       => $request->jurusan,
            ]);
        }

        return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Diubah!']);
    }

    public function destroy(string $id): RedirectResponse
    {
        $projek = Projek::findOrFail($id);

        Storage::delete('public/images/projek/' . $projek->foto);

        $projek->delete();

        return redirect()->route('projek.index')->with(['success' => 'Data Berhasil Dihapus!']);
    }
}

Bisa dilihat pada fungsi show dalam ProjekController bertujuan untuk menampilkan detail dari satu projek berdasarkan ID yang diterima sebagai parameter. Ketika pengguna mengakses halaman untuk melihat projek tertentu, fungsi ini akan mencari projek di dalam database menggunakan metode findOrFail, yang akan mencari data projek berdasarkan ID. 

Jika projek dengan ID tersebut ditemukan, datanya akan diambil dan disimpan dalam variabel $projek. Namun, jika projek tidak ditemukan, metode ini akan menghasilkan respons error 404 (halaman tidak ditemukan). Setelah data projek berhasil ditemukan, fungsi ini akan me-render halaman view projek.show, di mana detail projek tersebut akan ditampilkan kepada pengguna. 

Data projek dikirim ke view menggunakan fungsi compact, yang memastikan variabel $projek tersedia di dalam view yang akan ditampilkan.

Setelah itu jangan lupa di save. Kemudian buka file web.php yang berada di folder routes dan tambahkan baris skrip baru seperti berikut:

<?php

use App\Http\Controllers\ProjekController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use Illuminate\Support\Facades\Hash;
use Illuminate\Http\Request;

Route::get('/projek', [ProjekController::class, 'index'])->name('projek.index');
Route::get('/projek/create', [ProjekController::class, 'create'])->name('projek.create');
Route::post('/projek', [ProjekController::class, 'store'])->name('projek.store');
Route::get('/projek/{id}', [ProjekController::class, 'show'])->name('projek.show');
Route::get('/projek/edit/{id}', [ProjekController::class, 'edit'])->name('projek.edit');
Route::put('/projek/{id}', [ProjekController::class, 'update'])->name('projek.update');
Route::delete('/projek/{id}', [ProjekController::class, 'destroy'])->name('projek.destroy');

Bisa dilihat bahwa rute projek.show digunakan untuk menampilkan detail satu projek berdasarkan ID yang dikirim melalui URL. Ketika pengguna mengakses /projek/{id}, ProjekController memanggil fungsi show, yang akan mencari projek di database menggunakan ID tersebut.

Jika projek ditemukan, datanya dikirim ke view projek.show untuk ditampilkan. Jika tidak ditemukan, respons error 404 akan diberikan. Rute ini hanya menggunakan metode GET untuk menampilkan data tanpa mengubah apapun di server.

Setelah itu jangan lupa di save. Kemudian kita akan membuat file di dalam folder views yang bernama show.blade.php yang berguna untuk menampilkan data. Kira kira seperti ini lokasi penyimpanannya:

projek-laravel/resources/views/projek/show.blade.php. Harap diperhatikan kalau folder projek adalah nama yang saya berikan di artikel mengenai CRUD. Kalian bisa mengecek artikel saya mengenai CRUD jika penasaran.

Kemudian pada file show.blade.php, tambahkan skrip berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Detail data siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">
    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded">
                    <div class="card-body">
                    <img src="{{ asset('storage/images/projek/' . $projek->foto) }}" class="rounded" style="width: 100%">
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card border-0 shadow-sm rounded">
                    <div class="card-body">
                        <h3>{{ $projek->nama }}</h3>
                        <hr/>
                        <p>{{ $projek->kelas }}</p>
                        <p>{{ $projek->jurusan }}</p>
                        <a href="{{ route('projek.index') }}" class="btn btn-primary btn-sm">Kembali</a>
                        <hr/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Bisa dilihat bahwa ini adalah skrip untuk menampilkan data. Terdapat juga elemen bootstrap di dalamnya sebagai hiasan. Namun jika kalian punya hiasan css sendiri, kalian bisa menambahkannya. Kemudian jangan lupa di save dan setelah itu buka file index.blade.php dan ketikkan skrip baru berikut:


<!DOCTYPE html>
<html>
<head>
    <title>Daftar Data Siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">
    <div class="container mt-5">
        <h1 class="mb-4">Daftar Data Siswa</h1>
        <form action="{{ route('projek.index') }}" method="GET" class="d-flex mb-3">
            <input class="form-control me-2" type="search" name="search" placeholder="Cari Berdasarkan Nama..." aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        <a href="{{ route('projek.create') }}" class="btn btn-primary mb-3">Tambah Data Siswa</a>
        <table class="table table-striped table-bordered">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>Foto</th>
                    <th>Nama</th>
                    <th>Kelas</th>
                    <th>Jurusan</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($projek as $index => $p)
                <tr>
                    <td>{{ $index + 1 + ($projek->currentPage() - 1) * $projek->perPage() }}</td>
                    <td class="text-center">
                        <img src="{{ asset('storage/images/projek/' . $p->foto) }}" class="rounded" style="width: 150px">
                    </td>
                    <td>{{ $p->nama }}</td>
                    <td>{{ $p->kelas }}</td>
                    <td>{{ $p->jurusan }}</td>
                    <td>
                        <form onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?');" 
                              action="{{ route('projek.destroy', $p->id) }}" method="POST">
                            <a href="{{ route('projek.edit', $p->id) }}" class="btn btn-warning btn-sm">Edit</a>
                            <a href="{{ route('projek.show', $p->id) }}" class="btn btn-primary btn-sm">Show</a>
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item {{ $projek->onFirstPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $projek->previousPageUrl() }}">Sebelumnya</a>
                </li>

                <li class="page-item {{ $projek->hasMorePages() ? '' : 'disabled' }}">
                    <a class="page-link" href="{{ $projek->nextPageUrl() }}">Berikutnya</a>
                </li>
            </ul>
        </nav>
        <div class="text-center">
            <span>Halaman {{ $projek->currentPage() }} dari {{ $projek->lastPage() }}</span>
        </div>
    </div>
</body>
</html>

Bisa dilihat bahwa saya menambahkan tombol button untuk show yang akan mengarah pada show.blade.php. Jika sudah jangan lupa di save.

Untuk mengeceknya, kalian bisa membuka localhost:8000/projek di browser kalian (seperti biasa jangan lupa menyalakan server laravel dan xamppnya).





Bisa dilihat bahwa kita sudah bisa menampilkan data. Seperti biasa saya akan menaruh semua skrip yang diubah atau dibuat di dalam github saya.

Terima kasih...

Posting Komentar