Laravel 11

Bab 3 - Menampilkan Data dari Database

Pemrograman Web dan

Agus Dwi Kurniawan 11/23/22
Perangkat Bergerak
TUTORIAL LARAVEL 11 #3 : MENAMPILKAN DATA DARI DATABASE

Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil

belajar bagaimana cara membuat dan menjalankan model beserta
migration. Dan pada artikel kali ini kita semua akan belajar bagaimana cara
menampilkan data dari database di Laravel 11. Dan untuk mempercantik
halaman kita akan menggunakan CSS Bootstrap.
 LANGKAH 1 – MEMBUKA PROJECT LARAVEL
Silahkan masuk di dalam folder htdocs>laravel-11 dengan menjalankan
perintah change direktori di cmd dengan membuka xampp control panel
lalu klik explorer :
Lalu akan keluar explorer dari xampp kita, selanjutnya silahkan buka folder
htdocs

Lalu buka folder laravel-11

Cara buka di terminal untuk windows 11 silahkan klik kanan > open in
terminal :
Untuk windows 10 kebawah bisa klik direktori lalu isi dengan
cmd

Maka akan keluar terminal/cmd dari direktori kita :

Apabila sudah di direktori maka kita buka isi folder nya di visual studio code
dengan perintah :
code .

Tekan Enter, maka project folder akan terbuka di Visual Studio Code .
Seperti gambar dibawah ini:
 LANGKAH 2 – MEMBUAT CONTROLLER BARANG
Pertama, kita akan membuat controller terlebih dahulu. Dan untuk teman-
teman semuanya, jika membuat controller pastikan menggunakan kata
tunggal atau singular ya. Karena Best Practice dalam pembuatan controller
menggunakan kata tunggal/singular.

REFERENSI : https://santrikoding.com/laravel-best-practices

Silahkan buka terminal/CMD yang ada di VS Code dengan menekan tombol

Ctrl dan ~ di keyboard atau menu Terminal – New Terminal

maka keluar seperti ini :

Kita akan membuat sebuah controller terlebih dahulu, controller ini yang
bertugas untuk mengatur semua aksi-aksi di dalam project.
Dan controller ini akan menghubungkan antara model, view dan juga route.

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD

dan pastikan sudah berada di dalam project Laravel-nya.
php artisan make:controller BarangController --resource --model=Barang

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1

file controller baru dengan nama BarangController.php yang berada di
dalam folder app/Http/Controllers.
Silahkan buka file tersebut

dan ubah kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers;

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

class BarangController extends Controller

{
public function index()
{
$barangs = Barang::latest()->paginate(5);
return view('barang.index', compact('barangs'));
}
}

PENJELASAN :
Dari perubahan kode di atas, pertama kita isi method dengan nama index.

public function index()

{
//

Di dalam method index, pertama kita get data barangs dari database
melalui model Barang.

$barangs = Barang::latest()->paginate(5);

Di atas, kita tambahkan metod latest, yang bertujuan untuk mengurutkan

data yang ditampilkan dari yang paling terbaru. Dan untuk
method paginate digunakan untuk membatasi data yang ditampilkan
perhalaman sejumlah angka yang ditentukan di dalam method tersebut.
Setelah itu, kita return ke dalam sebuah view dengan
nama index.blade.php yang berada di dalam
folder resources/views/barang. Jika kita lihat memang belum ada, karena
kita akan membuatnya nanti.

Dan kita juga mengirimkan data barangs tersebut ke dalam view melalui
method bawaan dari PHP, yaitu compact.
 LANGKAH 3 – MENAMBAHKAN ROUTE RESOURCE
Sekarang kita akan lanjutkan menambahkan sebuah route di Laravel 11.
Disini kita akan menggunakan route dengan type resource, yang artinya
route tersebut akan berisi beberapa route-route untuk kebutuhan CRUD.
Seperti index, create, store, show, edit, update dan destroy. Ini akan
menghemat waktu kita dibandingkan membuatnya secara manual satu
persatu.

Setelah controller berhasil dibuat, maka langkah berikutnya adalah

membuat route-nya. Route ini akan bertugas sebagai penghubung antara
pengguna / user dengan aplikasi. Kurang lebih ilustrasinya seperti berikut
ini.
Sekarang, silahkan buka file routes/web.php,

kemudian ubah semua kode-nya menjadi seperti berikut ini :

<?php

use App\Http\Controllers\BarangController;
use Illuminate\Support\Facades\Route;

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

Route::resource('/barang', BarangController::class);
Di atas, kita membuat sebuah route baru dengan path /barang dan kita
arahkan ke dalam class BarangController. Untuk route yang kita buat
adalah jenis resource, artinya Laravel akan secara otomatis
menghasilkan route-route untuk berbagai operasi CRUD, seperti:

METHOD PATH KETERANGAN

GET /barang Menampilkan semua products.

Menampilkan form untuk

GET /barang/create
membuat product baru.

POST /barang Menyimpan product baru.

GET /barang/{id} Menampilkan detail dari sebuah product.

Menampilkan form untuk

GET /barang/{id}/edit
mengedit product.

PUT/PATCH /barang/{id} Memperbarui product yang ada.

DELETE /barang/{id} Menghapus product.

Untuk memastikan apakah route-route tersebut sudah
digenerate oleh Laravel, teman-teman bisa menjalankan perintah berikut
ini di dalam terminal/CMD.

php artisan route:list

 LANGKAH 4 – INSTALL BOOTSTRAP VIA NPM
Setelah kita berhasil menambahkan route, sekarang kita lanjutkan untuk
menambahkan bootstrap di Project laravel kita via NPM.

Node Package Manager atau NPM adalah package manager dan

repositori software dalam bahasa pemrograman JavaScript yang
digunakan untuk memasang, menghapus, dan mengelola library atau
package software dalam proyek pengembangan aplikasi.

NPM memungkinkan developer membagikan kode yang mereka tulis dan

menggunakan kode yang ditulis oleh orang lain, memfasilitasi kolaborasi
dan mempercepat proses pengembangan. Repository NPM berisi lebih dari
satu juta package perangkat lunak yang dapat dipakai dan dikontribusikan
oleh siapa saja.

Salah satu fitur utama NPM adalah file package.json yang digunakan
untuk menentukan dependensi dan metadata proyek. Fungsi ini
mempermudah manajemen versi dan distribusi kode.

Silahkan install npm dengan menginstall node js yang materinya ada di link
:
https://drive.google.com/file/d/14xPW6uDRa0QtEATqvsBWyqVmoHBZJ3U
z/view?usp=sharing atau di https://s.id/xiirpl
Jika sudah terinstall kita buka terminal dan cek dulu sudah terinstall npm
dengan mengetik :
npm -v
Jika sudah terinstall maka akan keluar versi npm sehingga kita bisa
menggunakan npm untuk menginstall bootstrap.
Untuk menginstall bootstrap di project Laravel, teman-teman bisa
menjalankan perintah berikut ini di dalam terminal/CMD :
npm i -D bootstrap @popperjs/core sass

Jika sudah selesai download maka keluar seperti ini :

Kita lihat di package.json sudah terisntall bootstrap dan popperjs

Lalu kita tambahkan folder baru bernama sass di folder resources dan
buat file baru bernama app.scss
 1
2

Lalu masukkan kode ini :

@import 'bootstrap/scss/bootstrap';

Jangan lupa di simpan.

Lalu buka resources/js/app.js

lalu tambahkan kode ini :
import * as _bootstrap from 'bootstrap';

Lalu simpan.
Lanjutkan dengan membuka file app/Providers/AppServiceProvider.php

Lalu tambahkan kode berikut ini di function boot() :

Paginator::useBootstrapFive();

Lalu tambahkan kode berikut ini di import diatasnya :

use Illuminate\Pagination\Paginator;
Isi keseluruhan kurang lebih seperti ini :

Jangan lupa disimpan.

 LANGKAH 5 – MEMBUAT VIEW
Setelah kita berhasil menambahkan route, sekarang kita lanjutkan untuk
membuat view untuk menampilkan data blog di layar browser. Silahkan
buat folder baru dengan nama layout dan barang di dalam
folder resources/views/

Kemudian di dalam folder layout silahkan buat file baru dengan

nama master.blade.php
Buat html:5

Jadi seperti ini :

Lalu kita ubah menjadi seperti ini :

<!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>@yield('judul')</title>
@vite(['resources/sass/app.scss','resources/js/app.js'])
@yield('css')
</head>
<body style="background: lightgray">
<div class="container mt-5">
@yield('konten')
</div>

@yield('skrip')
</body>
</html>

Untuk membuat tampilan tidak terpotong karena terlalu panjang bisa

dengan menekan tombol di keyboard Alt+Z

Jangan lupa di Save.

Kemudian di dalam folder barang yang sudah kita buat tadi silahkan buat
file baru dengan nama index.blade.php

dan masukkan kode berikut ini :

@extends('layout.master')

@section('judul', 'Data Barang')

@section('konten')
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow rounded">
<div class="card-body">
<a href="{{ route('barang.create') }}" class="btn btn-md btn-
success mb-3">TAMBAH BARANG</a>
@if(session('success'))
<div class="alert alert-success alert-dismissible fade
show" role="alert">
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-label="Close"></button>
<strong>Berhasil!!</strong> {{ session('success') }}
</div>
@elseif(session('error'))

<div class="alert alert-danger alert-dismissible fade

show" role="alert">
 <button type="button" class="btn-close" data-bs-
dismiss="alert" aria-label="Close"></button>
<strong>GAGAL!!</strong> {{ session('error') }}
</div>

@endif

<table class="table table-bordered">

<thead>
<tr>
<th scope="col">GAMBAR</th>
<th scope="col">Nama Barang</th>
<th scope="col">Harga</th>
<th scope="col">Stok</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
@forelse ($barangs as $barang)
<tr>
<td class="text-center">
<img src="{{
Storage::url('public/barang/') . $barang->gambar }}" class="rounded"
style="width: 150px">
</td>
<td>{{ $barang->judul }}</td>
<td>{{ "Rp " . number_format($barang-
>harga,2,',','.') }}</td>
<td>{{ $barang->stok }}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah
Anda Yakin ?');" action="{{ route('barang.destroy', $barang->id) }}"
method="POST">
<a href="{{ route('barang.show',
$barang->id) }}" class="btn btn-sm btn-dark">SHOW</a>
<a href="{{ route('barang.edit',
$barang->id) }}" class="btn btn-sm btn-primary">EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn
btn-sm btn-danger">HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Barang belum Tersedia.
</div>
 @endforelse
</tbody>
</table>
{{ $barangs->links() }}
</div>
</div>
</div>
</div>
@endsection

Keluruhan index.blade.php :
PENJELASAN :
Dari penambahan kode di atas, kita melakukan perulangan untuk
menampilkan data yang dikirimkan melalui controller. Dan untuk
perulangan, kita menggunakan direktif @forelse, dimana jika data ada
maka akan dilakukan looping dan jika data tidak tersedia, maka akan
menampilkan pesan/message.

@forelse ($barangs as $barang)

//menampilkan data

@empty

//menampilkan pesan data belum tersedia

@endforelse
Dan untuk menampilkan pagination, kita bisa menggunakan kode berikut
ini :

{{ $barangs->links()
Kemudian untuk menampilkan alert setelah kita berhasil menambahkan
data, disini kita menggunakan alert yang dismissable dari bootstrap, untuk
menampilkannya kurang lebih seperti berikut ini :

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"
role="alert">
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-
label="Close"></button>
<strong>Berhasil!!</strong> {{ session('success') }}
</div>
@elseif(session('error'))
<div class="alert alert-danger alert-dismissible fade show"
role="alert">
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-
label="Close"></button>
<strong>GAGAL!!</strong> {{ session('error') }}
</div>
@endif
Alert ini bisa kita lihat saat kita berhasil atau gagal melakukan input data,
update data dan hapus data.
Dan untuk menampilkan image dari post, di atas kita menggunaka kode
seperti berikut ini :

<img src="{{ Storage::url('public/barang/').$barang->image }}"

class="rounded" style="width: 150px">
 LANGKAH 5 – UJI COBA MENAMPILKAN DATA
Sekarang kita bisa mencoba menjalankan projectnya di terminal dengan
perintah php artisan serve

Lalu buat terminal baru untuk jalankan Bootstrap nya dengan kode
npm run dev
Jangan lupa nyalakan service apache dan mysql nya.

Sekarang, kita bisa mencoba membukanya di dalam

URL http://localhost:8000/barang dan jika berhasil maka akan
menampilkan halaman seperti berikut ini :
Di atas menampilkan pesan Data Barang belum Tersedia., karena kita
memang belum memiliki data apapun di dalam table barangs. Di materi
selanjutnya kita akan belajar bagaimana cara melakukan proses insert /
memasukkan data baru ke dalam table barangs.

Terima Kasih