Tutorial Laravel 11

#1 : Perubahan dan Fitur Baru di Laravel 11

Fika Ridaul Maulayya

Halo teman-teman semuanya, pada artikel kali ini kita semua akan membahas apa saja fitur-fitur baru dan
perubahan yang terjadi di Laravel 11.
Jika kita lihat pada kebijakan dukungan Laravel, maka Laravel 11 akan dirilis pada Q1 tahun 2024, yaitu
tepatnya di bulan Maret 2024.
Version PHP (*) Release Bug Fixes Until Security Fixes Until
9 8.0 - 8.2 February 8th, 2022 August 8th, 2023 February 6th, 2024
10 8.1 - 8.3 February 14th, 2023 August 6th, 2024 February 4th, 2025
11 8.2 - 8.3 March 12th, 2024 September 3rd, 2025 March 12th, 2026
12 8.2 - 8.3 Q1 2025 Q3, 2026 Q1, 2027
Kemudian apa saja fitur-fitur dan perubahan yang terjadi di Laravel 11 ? mari kita akan membahasnya
satu-persatu.

Pengenalan Laravel 11
Laravel 11 melanjutkan perbaikan yang dilakukan di Laravel 10.x dengan memperkenalkan struktur aplikasi
yang disederhanakan, per-second rate limiting, health routing, graceful encryption key rotation, queue
testing improvements, Resend mail transport, Prompt validator integration, new Artisan commands, dan
masih banyak lagi.
Selain itu, Laravel juga merilis sebuah library yang bernama Laravel Reverb. Library ini merupakan server
WebSocket yang memberikan kemampuan real-time yang baik pada aplikasi yang kita buat.

PHP 8.2
Untuk PHP dengan versi 8.1 kini sudah tidak akan bisa digunakan lagi di Laravel 11. Untuk teman-teman
yang akan memulai membuat project baru di Laravel 11, maka harus menggunakan PHP versi 8.2 atau 8.3.
Berikut ini informasi terkait dukungan PHP 8.1 yang dihentikan di Laravel 11.
[11.x] Drop PHP 8.1 support

Kerangka Aplikasi yang lebih Sederhana

Laravel 11 akan hadir dengan struktur folder yang disederhanakan. Jadi sekarang saat teman-teman ketika
membuat project baru di Laravel 11, maka di dalam folder app hanya terdapat 3 folder saja, yaitu Http,
Models dan Providers, kurang lebih seperti ini.
app
├── Http
│ └── Controllers
│ └── Controller.php
├── Models
│ └── User.php
└── Providers
└── AppServiceProvider.php

Struktur aplikasi baru ini dimaksudkan untuk memberikan pengalaman yang lebih ramping dan modern,
dengan tetap mempertahankan banyak konsep yang sudah familiar bagi pengembang Laravel sebelumnya.
INFORMASI : jika sebelumnya teman-teman menggunakan Laravel versi 10 ke bawah dan ingin upgrade ke
Laravel 11, maka kita tidak harus mengadopsi struktur project baru ini. Artinya, struktur project Laravel
lama masih tetap bisa digunakan.

Tampilan Welcome Screen Baru

Di Laravel 11 untuk tampilkan welcome screen kini telah diubah, kurang lebih seperti berikut ini.

File Bootstrap Aplikasi

File bootstrap/app.php telah direvitalisasi sebagai kode pertama dari aplikasi. Dari file ini, kita sekarang dapat
menyesuaikan route aplikasi, middleware, service providers, exception handling, dan banyak lagi. File ini
menyatukan berbagai pengaturan aplikasi yang sebelumnya tersebar di seluruh struktur file aplikasi
Laravel:
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware) {
//
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();

Perubahan Route
Sekarang di Laravel 11 untuk default Route-nya hanya akan terdapat 2 file saja, yaitu console.php dan
web.php. Terus bagaimana jika kita ingin membuat route untuk Rest API ? cukup mudah kok, kita tinggal
jalankan saja perintah berikut ini.
php artisan install:api

Dengan begitu, maka file api.php akan digenerate di dalam folder routes. Begitu juga dengan route
broadcasting, teman-teman bisa menjalankan perintah berikut ini.
php artisan install:broadcasting

Perintah Artisan Baru

Perintah Artisan baru telah ditambahkan untuk memungkinkan pembuatan class, enum, interface, dan
traits:
php artisan make:class
php artisan make:enum
php artisan make:interface
php artisan make:trait

Model Cast Improvements

Dulu jika kita ingin mendefiniskan cast tentu kita menggunakan sebuah properti, contohnya seperti ini.
protected $casts = [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
Sekarang di dalam Laravel 11, untuk mendefinisikan cast kita harus menggunakan method, jadi hasilnya
seperti berikut ini.
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}

Default Database
Secara default, aplikasi Laravel baru menggunakan database SQLite untuk penyimpanan database, serta
driver database untuk session, cache, dan queue, namun kita tetap dapat menggunakan database lain
seperti mysql.

Laravel Reverb
Laravel Reverb menghadirkan komunikasi WebSocket real-time yang sangat cepat dan terukur langsung ke
aplikasi Laravel kita, dan menyediakan integrasi dengan event broadcasting Laravel yang sudah ada,
seperti Laravel Echo.
Untuk informasi lebih lanjut tentang Laravel Reverb : https://laravel.com/docs/11.x/reverb

Trait Dumpable
Saat itu, di Laravel 11 semua kelas telah ditambahkan method dd atau dump. Tujuannya untuk
menyerdehanakan inti dari framework itu sendiri. Contohnya seperti berikut ini.
class Stringable implements JsonSerializable, ArrayAccess
{
use Conditionable, Dumpable, Macroable, Tappable;
str('foo')->dd();
str('foo')->dump();

Migration yang lebih Sederhana

Sekarang di Laravel 11 untuk default migration yang disertakan akan disederhanakan, yaitu kita hanya
akan menemukan 3 file migration saja.
database/migrations
├── 0001_01_01_000000_create_users_table.php
├── 0001_01_01_000001_create_cache_table.php
└── 0001_01_01_000002_create_jobs_table.php
0 directories, 3 files
Per-Second Rate Limiting
Pada versi sebelumnya, Laravel membatasi rate limiter itu adalah "per menit". Dan sekarang di Laravel
mendukung rate limiting "per detik", termasuk untuk permintaan HTTP dan queued jobs.
RateLimiter::for('invoices', function (Request $request) {
return Limit::perSecond(1);
});

Untuk informasi lebih lanjut tentang rate limiting di Laravel, lihat dokumentasinya.

Eager Loading Limit

Laravel 11 akan terintegrasi dengan package yang nanti akan memudahkan kita dalam membuat query di
dalam eager loading. Berikut ini contohnya.
User::select('id', 'name')->with([
'articles' => fn($query) => $query->limit(5)
])->get();

Untuk informasi lebih lanjut, lihat selengkapnya disini https://github.com/staudenmeir/eloquent-eager-

limit

#2: Cara Install dan Menjalankan Laravel 11

Sekarang ini kita akan belajar cara installasi Laravel 11, membuat model dan migration, operasi CRUD
(create, read, update dan delete) dan juga upload gambar.
Langkah 1 - Installasi Composer
Berikut ini beberapa cara untuk melakukan installasi Composer sesuai dengan sistem operasi yang
digunakan.
 Installation - Linux / Unix / macOS : https://getcomposer.org/doc/00-intro.md#installation-linux-
unix-macos
 Installation - Windows : https://getcomposer.org/doc/00-intro.md#installation-windows
Untuk memastikan apakah Composer berhasil diinstall di dalam komputer, maka kita bisa menjalankan
perintah berikut ini di dalam terminal/CMD.
Composer
Langkah 2 - Membuat Project Laravel 11
INFORMASI : minimal versi PHP yang digunakan adalah 8.2.
Sekarang silahkan teman-teman masuk ke dalam folder dimana akan menyimpan project-nya, jika
menggunakan XAMPP, maka berada di dalam folder htdocs.
Setelah itu, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
composer create-project --prefer-dist laravel/laravel:^11.0 laravel-11

Perintah di atas, digunakan untuk membuat project Laravel 11 dengan nama laravel-11. Silahkan tunggu
proses installasinya sampai selesai dan pastikan terhubung dengan internet.
Langkah 3 - Menjalankan Laravel 11
Setelah proses installasi Laravel 11 selesai, maka langkah berikutnya adalah melakukan uji coba
menjalankan project Laravel.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
cd laravel-11

Perintah di atas digunakan untuk masuk ke dalam folder project kita yang bernama laravel-11.
Setelah berhasil masuk di dalam project-nya, sekarang jalankan perintah berikut ini di dalam terminal/CMD
untuk menjalankan server-nya.
php artisan serve

Jika berhasil, project Laravel kita akan dijalankan di dalam localhost dengan port 8000. Teman-teman bisa
membukanya di dalam browser dengan mengetikkan http://localhost:8000.
Jika berhasil, maka hasilnya akan seperti berikut ini.

Langkah 4 - Menjalankan Storage Link

Laravel itu hanya bisa mengakses file yang berada di dalam folder public, sedangkan file-file atau gambar
yang kita upload akan berada di dalam folder storage.
Terus bagaimana caranya agar laravel bisa membaca file-file yang telah diupload tersebut ? Ya,
jawabannya adalah dengan cara symlink atau storage link.
Dimana perintah storage link ini nantinya akan membuatkan sebuah link folder dari storage ke dalam folder
public.
Dengan begini, maka Laravel akan bisa membaca isi di dalam folder storage melalui folder public.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di
dalam project Laravel-nya.
php artisan storage:link
#3 : Membuat Model dan Migration
Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar banyak hal, seperti installasi
Laravel 11, menjalankan Laravel 11 dan membuat storage link.
Pada artikel kali ini, kita semua akan belajar bagaimana cara membuat Model dan Migration di dalam
Laravel 11.
Langkah 1 - Konfigurasi Koneksi Database
Pertama-tama, mari kita konfigurasi koneksi antara MySQL dengan Laravel 11, caranya juga cukup mudah,
kita tinggal mengkonfigurasinya di dalam file .env.
Silahkan teman-teman bukan file .env, kemudian cari kode berikut ini.
DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

kemudian ubah menjadi seperti berikut ini.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_laravel11
DB_USERNAME=root
DB_PASSWORD=

Di atas, pertama kita ubah konfigurasi DB_CONNECTION yang semula menggunakan sqlite menjadi mysql.
Kemudian kita hapus semua tanda # pada konfigurasi key, tujuaanya agar variable-nya diaktifkan.
Kemudian untuk DB_DATABASE kita atur menggunakan db_laravel_11.
Untuk DB_USERNAME secara default adalah root dan untuk DB_PASSWORD jika teman-teman menggunakan
XAMPP, maka dikosongkan saja.

Langkah 2 - Membuat Model dan Migration

Kita lanjutkan untuk membuat Model dan Migration di dalam Laravel 11, silahkan teman-teman jalankan
perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.
php artisan make:model Product -m
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru yang berada di dalam
folder
1. app/Models/Product.php
2. database/migrations/2024_01_31_080603_create_products_table.php
INFORMASI : nama file Migration akan random sesuai dengan tanggal dibuat-nya.
Langkah 3 - Menambahkan Field / Kolom di dalam Migration
Setelah file Migration berhasil dibuat, maka kita akan menambahkan field/kolom di dalamnya. Silahkan
teman-teman buka file migration-nya, kemudian pada function up ubah kode-nya menjadi seperti berikut ini.
database/migrations/2024_01_31_080603_create_products_table.php
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('image');
$table->string('title');
$table->text('description');
$table->bigInteger('price');
$table->integer('stock')->default(0);
$table->timestamps();
});
}

Dari perubahan kode di atas, kita menambahkan 5 field, yaitu :

FIELD / KOLOM TIPE DATA OPTION
image string -
title string -
description text -
price bigInteger -
stock integer nilai default 0
Langkah 4 - Menambahkan Mass Assignment
Mass Assignment merupakan sebuah properti array yang berisi field-field yang ada di dalam table /
migration. Mass Assignment digunakan agar field yang sudah kita tambahkan di dalam migration dapat
melakukan manipulasi ke dalam database.
Silahkan teman-teman buka file app/Models/Product.php, kemudian ubah kode-nya menjadi seperti berikut
ini.
app/Models/Product.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
/**
* fillable
*
* @var array
*/
protected $fillable = [
'image',
'title',
'description',
'price',
'stock',
];
}

Di atas, kita menambahkan properti $fillable dengan jenis array dan di dalamnya terdapat field/kolom yang
sudah kita buat sebelumnya di dalam file migration.
Langkah 5 - Menjalankan Proses Migrate
Sekarang kita akan belajar bagaimana menjalankan proses migrate di dalam Laravel, proses ini akan men-
generate database dan table beserta field/kolom di dalamnya.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di
dalam project Laravel-nya.
php artisan migrate

Jika keluar pertanyaan seperti berikut ini. Itu artinya kita belum memiliki database di dalam MySQL dengan
nama db_laravel11 dan apakah kita ingin membuatnya ? Silahkan pilih Yes dan ENTER.
WARN The database 'db_laravel11' does not exist on the 'mysql' connection.
┌ Would you like to create it? ────────────────────────────────┐
│ ● Yes / ○ No │
└──────────────────────────────────────────────────────────────┘
Dan jika teman-teman cek pada PhpMyAdmin di http://localhost/phpmyadmin, maka table-table akan
berhasil digenerate berserta field-field di dalamnya.

Kesimpulan
Sampai disini pembahasan kita terkait bagaimana cara membuat Model dan Migration di dalam Laravel 11
dan kita juga belajar menambahkan field dan mass assignment beserta menjalankan proses migrate.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara menampilkan data dari database di dalam
Laravel 11.
Terima Kasih
santrikoding.com

Tutorial Laravel 11 #4 : Menampilkan Data dari

Database
Fika Ridaul Maulayya
9–11 minutes

 Langkah 1 - Membuat Controller Product

 Langkah 2 - Membuat Route Resource Product
 Langkah 3 - Membuat View untuk Menampilkan Data
 Langkah 4 - Uji Coba Menampilkan Data Products
 Kesimpulan
Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara
menampilkan data dari database di Laravel 11.
Untuk mempercepat kita dalam pembuatan user interface, nantinya kita akan menggunakan framework
CSS Bootstrap.
Langkah 1 - Membuat Controller Product
Pertama, 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 ProductController

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru yang berada di
dalam folder app/Http/Controllers/ProductController.php.
Silahkan teman-teman buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
class ProductController extends Controller
{
/**
* index
*
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
}

Dari perubahan kode di atas, pertama kita harus melakukan import Model Product.
//import model product
use App\Models\Product;

kemudian kita import juga return type View.

//import return type View
use Illuminate\View\View;

Setelah itu, di dalam class ProductController kita menambahkan sebuah method baru dengan nama index.
public function index() : View
{

//...

Di dalam method tersebut, hal pertama yang kita lakukan adalah memanggil data products dari database
melalui Model Product.
//get all products
$products = Product::latest()->paginate(10);

Setelah data berhasil di dapatkan dan ditampung di dalam variable $products, maka langkah berikutnya
adalah melakukan render view beserta mengirim data product yang ada di dalam variable $products.
//render view with products
return view('products.index', compact('products'));

Di atas, kita gunakan compact untuk mengirim data dari controller ke dalam view.
Langkah 2 - Membuat Route Resource Product
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.
Silahkan teman-teman buka file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
//route resource for products
Route::resource('/products', \App\Http\Controllers\ProductController::class);

Di atas, kita membuat sebuah route baru dengan path /products dan kita arahkan ke dalam class
ProductController. 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 /products Menampilkan semua products.
GET /products/create Menampilkan form untuk membuat product baru.
POST /products Menyimpan product baru.
GET /products/{id} Menampilkan detail dari sebuah product.
GET /products/{id}/edit Menampilkan form untuk mengedit product.
PUT/PATCH /products/{id} Memperbarui product yang ada.
DELETE /products/{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 3 - Membuat View untuk Menampilkan Data
Sekarang kita akan lanjutkan membuat view, yang nanti digunakan untuk menampilkan list data products
dari database.
Silahkan teman-teman buat folder baru dengan nama products di dalam folder resources/views, kemudian di
dalam folder products tersebut silahkan buat file baru dengan nama index.blade.php, kemudian masukkan
kode berikut ini di dalamnya.
resources/views/products/index.blade.php
<!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>Data Products - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: lightgray">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div>
<h3 class="text-center my-4">Tutorial Laravel 11 untuk Pemula</h3>
<h5 class="text-center"><a href="https://santrikoding.com">www.santrikoding.com</a></h5>
<hr>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<a href="{{ route('products.create') }}" class="btn btn-md btn-success mb-3">ADD PRODUCT</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">IMAGE</th>
<th scope="col">TITLE</th>
<th scope="col">PRICE</th>
<th scope="col">STOCK</th>
<th scope="col" style="width: 20%">ACTIONS</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr>
<td class="text-center">
<img src="{{ asset('/storage/products/'.$product->image) }}" class="rounded" style="width: 150px">
</td>
<td>{{ $product->title }}</td>
<td>{{ "Rp " . number_format($product->price,2,',','.') }}</td>
<td>{{ $product->stock }}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('products.destroy', $product->id) }}"
method="POST">
<a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-dark">SHOW</a>
<a href="{{ route('products.edit', $product->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 Products belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $products->links() }}
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
//message with sweetalert
@if(session('success'))
Swal.fire({
icon: "success",
title: "BERHASIL",
text: "{{ session('success') }}",
showConfirmButton: false,
timer: 2000
});
@elseif(session('error'))
Swal.fire({
icon: "error",
title: "GAGAL!",
text: "{{ session('error') }}",
showConfirmButton: false,
timer: 2000
});
@endif
</script>
</body>
</html>

Dari penambahan kode di atas, untuk menampilkan data kita akan gunakan direktif @forelse.
@forelse ($products as $product)

//tampilkan data

@empty

//Data products belum Tersedia.

@endforelse

Untuk pagination, kita cukup memanggilnya seperti berikut ini.

{{ $products->links() }}
kemudian kita menambahkan kondisi untuk memeriksa sebuah session flash, yang nantinya difungsikan
untuk menampilkan alert atau notifikasi setelah berhasil melakukan proses insert. update dan delete data.
Dan library yang kita gunakan adalah Sweet Alert2.
<script>
//message with sweetalert
@if(session('success'))
Swal.fire({
icon: "success",
title: "BERHASIL",
text: "{{ session('success') }}",
showConfirmButton: false,
timer: 2000
});
@elseif(session('error'))
Swal.fire({
icon: "error",
title: "GAGAL!",
text: "{{ session('error') }}",
showConfirmButton: false,
timer: 2000
});
@endif
</script>

Langkah 4 - Uji Coba Menampilkan Data Products

Sekarang silahkan teman-teman jalankan project-nya dengan mengakses http://localhost:8000/products di
dalam browser, jika berhasil maka hasilnya kurang lebih seperti berikut ini.
Di atas masih menampilkan pesan Data Products belum Tersedia, itu karena memang kita masih belum memiliki
data apapun di dalam table products.
Kesimpulan
Pada artikel ini kita telah belajar banyak hal, seperti membuat controller beserta method-nya, membuat
dan memahami routing dan menampilkan data menggunakan view.
Pada artikel berikutnya kita semua akan belajar bagaimana cara melakukan proses insert data ke dalam
database di Laravel 11.
Terima Kasih
santrikoding.com

Tutorial Laravel 11 #5 : Insert Data ke Dalam

Database
Fika Ridaul Maulayya
11–13 minutes

 Langkah 1 - Menambahkan Method Create dan Store di Controller

 Langkah 2 - Membuat View Form Create Product
 Langkah 3 - Uji Coba Insert Data Product
 Kesimpulan
Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara menampilkan list
data products dari database di Laravel 11. Dan pada artikel kali ini kita semua akan belajar bagaimana cara
membuat proses insert data ke dalam database di Laravel 11. Kita juga akan belajar bagaimana cara
melakukan upload gambar di Laravel 11.
Langkah 1 - Menambahkan Method Create dan Store di Controller
Karena akan membuat proses insert data, maka kita harus menambahkan 2 method baru di dalam
controller, apa saja method tersebut? berikut ini penjelasannya.
METHOD KETERANGAN
create Digunakan untuk menampilkan halaman form tambah data
store Digunakan untuk insert data ke dalam database dan melakukan upload gambar.
Silahkan teman-teman buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya
menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
//import return type redirectResponse
use Illuminate\Http\RedirectResponse;
//import Http Request
use Illuminate\Http\Request;
class ProductController extends Controller
{
/**
* index
*
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
/**
* create
*
* @return View
*/
public function create(): View
{
return view('products.create');
}
/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//upload image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
}

Dari perubahan kode di atas, pertama kita import return type RedirectResponse.
//import return type redirectResponse
use Illuminate\Http\RedirectResponse;

kemudian kita import juga Http Request.

//import Http Request
use Illuminate\Http\Request;

Setelah itu, di dalam class ProductController kita menambahkan 2 method baru:

1. function create
2. function store
Function Create
Method ini akan kita gunakan untuk menampilkan halaman form tambah data product. Pada method ini
kita hanya melakukan return ke dalam sebuah view.
public function create(): View
{
return view('products.create');
}

Function Store
Method ini akan kita gunakan untuk melakukan proses insert data ke dalam database dan juga upload
gambar.
public function store(Request $request): RedirectResponse
{

//...

Di dalam method tersebut, hal pertama yang kita lakukan adalah membuat validasi, yaitu untuk memeriksa
apakah data yang dikirimkan sudah sesuai atau belum.
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);

Dari kode validasi di atas, berikut ini penjelasan lengkapnya.

KEY VALIDATION KETERANGAN
image required field wajib diisi.
image field harus berupa gambar
mimes:jpeg,jpg,png filed harus memiliki extensi jpeg, jpg dan png.
max:2048 field maksimal berukuran 2048 Mb / 2Mb.
title required field wajib diisi.
min:5 field minimal memiliki 5 karakter/huruf.
description required field wajib diisi.
min:10 field minimal memiliki 10 karakter/huruf.
price requied field wajib diisi.
numeric field harus berupa angka
stock requierd field wajib diisi.
numeric field harus berupa angka
Setelah itu, kita melakukan upload gambar menggunakan method storeAs.
//upload image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());

Setelah data berhasil diupload, maka langkah selanjutnya adalah melakukan proses insert data ke dalam
database menggunakan Model Product.
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);

Jika proses insert data berhasil dilakukan, maka kita akan redirect ke dalam route yang bernama
products.index dengan mengirimkan sebuah session flash data.

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

Langkah 2 - Membuat View Form Create Product

Setelah berhasil membuat method di dalam controller, maka langkah selanjutnya adalah membuat
halaman view untuk menampilkan form tambah data product.
Silahkan teman-teman buat file baru dengan nama create.blade.php di dalam folder resources/views/products,
kemudian masukkan kode berikut ini di dalamnya.
resources/views/products/create.blade.php
<!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>Add New Products - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: lightgray">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="form-group mb-3">
<label class="font-weight-bold">IMAGE</label>
<input type="file" class="form-control @error('image') is-invalid @enderror" name="image">
<!-- error message untuk image -->
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">TITLE</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}"
placeholder="Masukkan Judul Product">
<!-- error message untuk title -->
@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">DESCRIPTION</label>
<textarea class="form-control @error('description') is-invalid @enderror" name="description" rows="5"
placeholder="Masukkan Description Product">{{ old('description') }}</textarea>
<!-- error message untuk description -->
@error('description')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">PRICE</label>
<input type="number" class="form-control @error('price') is-invalid @enderror" name="price" value="{{ old('price') }}"
placeholder="Masukkan Harga Product">
<!-- error message untuk price -->
@error('price')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">STOCK</label>
<input type="number" class="form-control @error('stock') is-invalid @enderror" name="stock" value="{{ old('stock') }}"
placeholder="Masukkan Stock Product">
<!-- error message untuk stock -->
@error('stock')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-primary me-3">SAVE</button>
<button type="reset" class="btn btn-md btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'description' );
</script>
</body>
</html>

Dari penambahan kode di atas, jika teman-teman perhatikan pada bagian form action, kita arahkan ke
dalam route yang bernama products.store. Artinya itu akan memanggil method yang bernama store yang
berada di dalam controller.
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">

//...

</form>

Pada bagian form kita tambahkan attribute enctype="multipart/form-data". Ini ditambahkan jika ada sebuah
upload file di dalam form-nya.
Kemudian di dalam JavaScript, teman-teman bisa perhatikan kita melakukan inisialisasi Rich Text Editor
menggunakan CKEdtor. Dan kita akan terapkan ke dalam textarea yang memiliki name description.
<script>
CKEDITOR.replace('description');
</script>

Langkah 3 - Uji Coba Insert Data Product

Silahkan teman-teman klik button ADD PRODUCT pada halaman products index atau bisa juga ke URL berikut
ini http://localhost:8000/products/create, jika berhasil maka akan menampilkan hasil seperti berikut ini.

Silahkan klik button SAVE tanpa mengisi data apapun, jika berhasil maka akan menampilkan validasi yang
kurang lebih serti berikut ini.

Sekarang, silahkan masukkan data di dalam form dan klik button SAVE, jika berhasil maka akan
menampilkan hasil seperti berikut ini.
Kesimpulan
Pada artikel ini kita telah belajar banyak hal, seperti membuat method create dan store untuk proses insert
data, membuat fungsi upload gambar, membuat halaman view untuk form tambah data product.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara menampilkan detail data product
berdasarkan ID.
Terima Kasih
santrikoding.com

Tutorial Laravel 11 #6 : Menampilkan Detail Data By

ID
Fika Ridaul Maulayya
6–8 minutes

 Langkah 1 - Menambahkan Method Show di Controller

 Langkah 2 - Membuat View Detail Data Product
 Langkah 3 - Uji Coba Menampilkan Detail Data Product
 Kesimpulan
Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara melakukan
proses insert data ke dalam database di Laravel 11. Dan pada artikel kali ini kita semua akan belajar
bagaimana cara menampilkan detail data berdassarkan ID di Laravel 11.
Langkah 1 - Menambahkan Method Show di Controller
Sekarang kita akan menambahkan 1 method di dalam controller dengan nama show dan jika teman-teman
bertanya, apakah harus dengan nama tersebut? jawabannya adalah iya, karena sebelumnya kita
menggunakan route dengan jenis resource, maka untuk penamaan method-method di dalam controller
harus sesuai dengan aturan dari Laravel.
Silahkan teman-teman buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya
menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
//import return type redirectResponse
use Illuminate\Http\RedirectResponse;
//import Http Request
use Illuminate\Http\Request;
class ProductController extends Controller
{
/**
* index
 *
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
/**
* create
*
* @return View
*/
public function create(): View
{
return view('products.create');
}
/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//upload image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
/**
* show
*
* @param mixed $id
* @return View
*/
public function show(string $id): View
{
//get product by ID
$product = Product::findOrFail($id);
//render view with product
return view('products.show', compact('product'));
}
}

Dari perubahan kode di atas, kita menambahkan method baru dengan nama show dan di dalam
parameternya kita berikan variable $id.
public function show(string $id): View
{

//...

Di dalam method di atas, kita akan melakukan get data dari database melalui Model Product dengan
method findOrFail.
//get product by ID
$product = Product::findOrFail($id);

Setelah data berhasil didapatkan, selanjutnya adalah dikirimkan ke dalam view.

//render view with product
return view('products.show', compact('product'));

Langkah 2 - Membuat View Detail Data Product

Setelah berhasil menambahkan method, maka langkah selanjutnya adalah membuat view untuk
menampilkan data-nya.
Silahkan teman-teman buat file baru dengan nama show.blade.php di dalam folder resources/views/products,
kemudian masukkan kode berikut ini di dalamnya.
resources/views/products/show.blade.php
<!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>Show Products - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: lightgray">
<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/products/'.$product->image) }}" 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>{{ $product->title }}</h3>
<hr/>
<p>{{ "Rp " . number_format($product->price,2,',','.') }}</p>
<code>
<p>{!! $product->description !!}</p>
</code>
<hr/>
<p>Stock : {{ $product->stock }}</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Dari penambahan kode di atas, kita menampilkan detail data-nya dengan cara memanggil objek dari
$product.

1. Menampilkan Gambar
2. <img src="{{ asset('/storage/products/'.$product->image) }}" class="rounded" style="width: 100%">

3. Menampilkan Title
4. {{ $product->title }}

5. Menampilkan Harga
6. {{ "Rp " . number_format($product->price,2,',','.') }}

Di atas, kita gunakan function number_format dari PHP untuk memformat harga product.
7. Menampilkan Description
8. {!! $product->description !!}

Karena di dalam description terdapat sintaks HTML, maka kita harus me-rendernya menggunakan {!!
!!}

9. Menampilkan Stock
10. {{ $product->stock }}

Langkah 3 - Uji Coba Menampilkan Detail Data Product

Silahkan teman-teman klik button SHOW di data yang teman-teman miliki, jika berhasil maka akan
menampilkan hasil seperti berikut ini.

Kesimpulan
Pada artikel ini, kita semua telah belajar bagaimana cara menampilkan detail data berdasarkan ID, dimana
data ID tersebut akan diambil dari parameter di dalam URL browser.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara membuat proses edit dan update data ke
dalam database di Laravel 11.
Terima Kasih
santrikoding.com

Tutorial Laravel 11 #7 : Edit dan Update Data ke

Database
Fika Ridaul Maulayya
13–16 minutes

 Langkah 1 - Menambahkan Method Edit dan Update di Controller

 Langkah 2 - Membuat View Form Edit Data Product
 Langkah 3 - Uji Coba Edit dan Update Product
 Kesimpulan
Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara menampilkan
detail data berdasarkan ID dan pada artikel kali ini kita akan belajar bersama-sama bagaimana cara
membuat proses edit dan update data di Laravel 11.
Langkah 1 - Menambahkan Method Edit dan Update di Controller
Pada proses pembuatan edit dan update, kita membutuhkan 2 method tambahan di dalam controller,
method tersebut bernama edit dan update. Berikut penjelasannya.
METHOD KETERANGAN
edit Digunakan untuk menampilkan halaman form edit data
update Digunakan untuk update data ke dalam database dan melakukan upload gambar (opsional).
Sekarang, silahkan teman-teman buka file app/Http/Controllers/ProductController.php, kemudian ubah semua
kode-nya menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
//import return type redirectResponse
use Illuminate\Http\Request;
//import Http Request
use Illuminate\Http\RedirectResponse;
//import Facades Storage
use Illuminate\Support\Facades\Storage;
class ProductController extends Controller
{
/**
* index
*
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
/**
* create
*
* @return View
*/
public function create(): View
{
return view('products.create');
}
/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//upload image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//create product
 Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
/**
* show
*
* @param mixed $id
* @return View
*/
public function show(string $id): View
{
//get product by ID
$product = Product::findOrFail($id);
//render view with product
return view('products.show', compact('product'));
}
/**
* edit
*
* @param mixed $id
* @return View
*/
public function edit(string $id): View
{
//get product by ID
$product = Product::findOrFail($id);
//render view with product
return view('products.edit', compact('product'));
}
/**
* update
*
* @param mixed $request
* @param mixed $id
* @return RedirectResponse
 */
public function update(Request $request, $id): RedirectResponse
{
//validate form
$request->validate([
'image' => 'image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//get product by ID
$product = Product::findOrFail($id);
//check if image is uploaded
if ($request->hasFile('image')) {
//upload new image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//delete old image
Storage::delete('public/products/'.$product->image);
//update product with new image
$product->update([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
} else {
//update product without image
$product->update([
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
}
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Diubah!']);
}
}
Dari perubahan kode di atas, pertama kita import Facades Storage dari Laravel. Ini akan kita gunakan untuk
menghapus file gambar product lama saat gambar diperbarui.
//import Facades Storage
use Illuminate\Support\Facades\Storage;

kemudian di dalam class productController, kita membuat 2 method baru, yaitu:

1. function edit
2. function update
Function Edit
Method ini akan kita gunakan untuk menampilkan halaman form edit data product dan di dalam method
tersebut terdapat parameter $id yang mana isinya akan diambil dari ID yang ada di dalam URL browser.
public function edit(string $id): View
{

//...

Di dalam method tersebut, kita melakukan get data ke dalam database menggunakan Model berdasarkan
ID.
//get product by ID
$product = Product::findOrFail($id);

Setelah data didapatkan, kita tinggal kirimkan data tersebut ke dalam view menggunakan compact.
//render view with product
return view('products.edit', compact('product'));

Function Update
Method ini akan kita gunakan untuk proses update data product ke dalam database. Di dalam method ini
terdapat 2 parameter, yaitu $request dan $id.
1. $request - digunakan untuk menerima request data yang dikirimkan oleh pengguna melalui form.
2. $id - merupakan ID data product yang akan akan dijadikan acuan update data.
public function update(Request $request, $id): RedirectResponse
{

//...

Di dalam method di atas, pertama-tama kita membuat sebuah validasi terlebih dahulu.
//validate form
$request->validate([
'image' => 'image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);

Dari penambahan validasi di atas, kurang lebih ini penjelasannya.

KEY VALIDATION KETERANGAN
image image field harus berupa gambar
mimes:jpeg,jpg,png filed harus memiliki extensi jpeg, jpg dan png.
max:2048 field maksimal berukuran 2048 Mb / 2Mb.
title required field wajib diisi.
min:5 field minimal memiliki 5 karakter/huruf.
description required field wajib diisi.
min:10 field minimal memiliki 10 karakter/huruf.
price requied field wajib diisi.
numeric field harus berupa angka
stock requierd field wajib diisi.
numeric field harus berupa angka
Setelah itu, kita melakukan get data ke dalam database menggunakan Model berdasarkan ID.
//get product by ID
$product = Product::findOrFail($id);

kemudian kita membuat kondisi untuk gambar, jika terdapat request gambar
//check if image is uploaded
if ($request->hasFile('image')) {

//upload gambar baru

//hapus gambar lama

//update data product dengan gambar baru

} else {

//update data product tanpa gambar

}

Di atas, jika ada sebuah request dengan nama image, maka kita akan melakukan beberapa aksi, yaitu:
1. Upload gambar baru
 2. //upload new image
3. $image = $request->file('image');
4. $image->storeAs('public/products', $image->hashName());

5. Hapus gambar lama

6. //delete old image
7. Storage::delete('public/products/'.$product->image);

8. Update data product

9. //update product with new image
10. $product->update([
11. 'image' => $image->hashName(),
12. 'title' => $request->title,
13. 'description' => $request->description,
14. 'price' => $request->price,
15. 'stock' => $request->stock
16. ]);

Tapi jika request image tidak ada, maka kita cukup update data product tanpa gambar.
//update product without image
$product->update([
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);

Setelah itu, kita tinggal redirect ke dalam sebuah route dengan nama products.index dengan menambahkan
flash data.
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Diubah!']);

Langkah 2 - Membuat View Form Edit Data Product

Langkah selanjutnya adalah membuat view untuk menampilkan halaman form edit data product. Silahkan
teman-teman buat file baru dengan nama edit.blade.php di dalam folder resources/views/products, kemudian
masukkan kode berikut ini di dalamnya.
resources/views/products/edit.blade.php
<!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>Edit Products - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: lightgray">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group mb-3">
<label class="font-weight-bold">IMAGE</label>
<input type="file" class="form-control @error('image') is-invalid @enderror" name="image">
<!-- error message untuk image -->
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">TITLE</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title', $product->title) }}"
placeholder="Masukkan Judul Product">
<!-- error message untuk title -->
@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-3">
<label class="font-weight-bold">DESCRIPTION</label>
<textarea class="form-control @error('description') is-invalid @enderror" name="description" rows="5"
placeholder="Masukkan Description Product">{{ old('description', $product->description) }}</textarea>
<!-- error message untuk description -->
@error('description')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">PRICE</label>
<input type="number" class="form-control @error('price') is-invalid @enderror" name="price" value="{{ old('price', $product-
>price) }}" placeholder="Masukkan Harga Product">
<!-- error message untuk price -->
@error('price')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="font-weight-bold">STOCK</label>
<input type="number" class="form-control @error('stock') is-invalid @enderror" name="stock" value="{{ old('stock', $product-
>stock) }}" placeholder="Masukkan Stock Product">
<!-- error message untuk stock -->
@error('stock')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-primary me-3">UPDATE</button>
<button type="reset" class="btn btn-md btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'description' );
</script>
</body>
</html>

Pada penambahan kode di atas, untuk mengisi value kita panggil object dari data product di dalam helper
old. Contohnya seperti berikut.

{{ old('title', $product->title) }}

Dan jangan lupa, untuk halaman form edit, pastikan teman-teman menambahakn method PUT di dalamnya.
Ini menandakan bahwa form tersebut adalah form edit data.
@method('PUT')

Langkah 3 - Uji Coba Edit dan Update Product

Silahkan teman-teman klik button EDIT di salah satu data yang dimiliki, jika berhasil maka akan
menampilkan halaman edit data product, kurang lebih seperti berikut ini.

Silahkan teman-teman sesuaikan isinya, kemudian klik button UPDATE, jika berhasil maka akan
menampilkan halaman seperti berikut ini.
Kesimpulan
Pada artikel ini kita telah belajar bagaimana cara membuat proses edit dan update data di Laravel 11,
dengan cara menambahkan 2 method di dalam controller, yaitu edit dan update dan membuat halaman view
untuk form edit-nya.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara membuat proses delete data di Laravel
11.
Terima Kasih
santrikoding.com

Tutorial Laravel 11 #7 : Edit dan Update Data ke

Database
Fika Ridaul Maulayya
6–8 minutes

 Langkah 1 - Menambahkan Method Destroy

 Langkah 2 - Uji Coba Delete Data Product
 Kesimpulan
Halo teman-teman semuanya, pada artikel terakhir di seri Tutorial Laravel 11 ini, kita akan belajar
bagaimana cara membuat proses delete data dari database dan sekaligus menghapus gambar.
Langkah 1 - Menambahkan Method Destroy
Sekarang kita akan menambahkan method baru di dalam controller, method ini yang bertugas melakukan
hapus data ke dalam database dan juga menghapus gambar di dalam project Laravel.
Silahkan teman-teman buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya
menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
//import return type redirectResponse
use Illuminate\Http\Request;
//import Http Request
use Illuminate\Http\RedirectResponse;
//import Facades Storage
use Illuminate\Support\Facades\Storage;
class ProductController extends Controller
{
/**
* index
*
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
/**
* create
*
* @return View
*/
public function create(): View
{
return view('products.create');
}
/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//upload image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
 ]);
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
/**
* show
*
* @param mixed $id
* @return View
*/
public function show(string $id): View
{
//get product by ID
$product = Product::findOrFail($id);
//render view with product
return view('products.show', compact('product'));
}
/**
* edit
*
* @param mixed $id
* @return View
*/
public function edit(string $id): View
{
//get product by ID
$product = Product::findOrFail($id);
//render view with product
return view('products.edit', compact('product'));
}
/**
* update
*
* @param mixed $request
* @param mixed $id
* @return RedirectResponse
*/
public function update(Request $request, $id): RedirectResponse
{
//validate form
$request->validate([
'image' => 'image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//get product by ID
$product = Product::findOrFail($id);
//check if image is uploaded
if ($request->hasFile('image')) {
//upload new image
$image = $request->file('image');
$image->storeAs('public/products', $image->hashName());
//delete old image
Storage::delete('public/products/'.$product->image);
//update product with new image
$product->update([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
} else {
//update product without image
$product->update([
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
}
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Diubah!']);
}
/**
* destroy
*
* @param mixed $id
* @return RedirectResponse
*/
public function destroy($id): RedirectResponse
{
//get product by ID
$product = Product::findOrFail($id);
//delete image
Storage::delete('public/products/'. $product->image);
//delete product
$product->delete();
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Dihapus!']);
}
}

Dari perubahan kode di atas, kita menambahkan method baru dengan nama destroy dan pada
parameternya ita berikan $id, yang nanti nilainya akn diambil dari URL browser.
public function destroy($id): RedirectResponse
{

//...

Di dalam method tersebut, pertama, kita akan mendari data product berdasarkan ID.
//get product by ID
$product = Product::findOrFail($id);

Jika sudah ditemukan, maka kita akan melakukan delete gambar.

//delete image
Storage::delete('public/products/'. $product->image);

Setelah gambar berhasil dihapus, langkah berikutnya adalah menghapus data dari database.
//delete product
$product->delete();

kemudian kita redirect ke dalam route yang bernama products.index dengan memberikan session flash data.
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Dihapus!']);

Langkah 2 - Uji Coba Delete Data Product

Silahkan teman-teman klik button DELETE di salah satu data yang dimiliki, jika berhasil maka akan
menampilkan alert konfirmasi. Kurang lebih seperti berikut ini.
Jika teman-teman klik OK, maka data akan dihapus dan teman-teman akan mendapatkan hasil seperti
berikut ini.

Kesimpulan
Pada artikel iin kita telah belajar menambahkan method untuk proses delete data dari database dan
menghapus gambar.
Jika teman-teman mengalami kendala atau kesalahan saat belajar, jangan sungkan-sungkan untuk
bertanya melalui kolom komentar atau juga bisa melaui group Telegram dari SantriKoding.
SOURCE CODE : https://github.com/SantriKoding-com/CRUD-Laravel-11
Terima Kasih