.png)
Membuat Produk
Sekarang, kita akan fokus pada sistem panel admin untuk membuat produk.Membuat produk dihalaman admin panel atau yang orang sebut juga backend adalah pengelolaan laman tempat kita mengisi konten atau isi web yang akan ditampilkan kepada user atau pengunjung website yang dikenal sebagai halaman frontend.
Memodifikasi Routes
Di routes/web.php, lakukan perubahan berikut dalam teks tebal.
Route::get('/admin/products', 'App\Http\Controllers\Admin\AdminProductController@index')->name("admin.product.index");
Route::post('/admin/products/store', 'App\Http\Controllers\Admin\AdminProductController@store')->name("admin.product.store");
Routes baru ("/admin/products/store") akan mengumpulkan dan menyimpan data produk yang baru dibuat. Ini menggunakan metode HTTP post karena metode kontroler akan mengumpulkan informasi untuk formulir.
Memodifikasi tampilan admin/product/index.blade.php
Di resources/views/admin/product/index.blade.php, lakukan perubahan berikut dalam teks tebal.
@extends('layouts.admin')
@section('title', $viewData["title"])
@section('content')
<div class="card mb-4">
<div class="card-header">
#Buat Produk
</div>
<div class="card-body">
@if($errors->any())
<ul class="alert alert-danger list-unstyled">
@foreach($errors->all() as $error)
<li>- {{ $error }}</li>
@endforeach
</ul>
@endif
<form method="POST" action="{{ route('admin.product.store') }}">
@csrf
<div class="row">
<div class="col">
<div class="mb-3 row">
<label class="col-lg-2 col-md-6 col-sm-12 col-form-label">Nama:</label>
<div class="col-lg-10 col-md-6 col-sm-12">
<input name="name" value="{{ old('name') }}" type="text" class="form-control">
</div>
</div>
</div>
<div class="col">
<div class="mb-3 row">
<label class="col-lg-2 col-md-6 col-sm-12 col-form-label">Harga:</label>
<div class="col-lg-10 col-md-6 col-sm-12">
<input name="price" value="{{ old('price') }}" type="number" class="form-control">
</div>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Deskripsi</label>
<textarea class="form-control" name="description" rows="3">{{ old('description') }}</textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header"> Kelola Produk
...
Mari analisis kode sebelumnya per bagian.
@if($errors->any())
<ul class="alert alert-danger list-unstyled"> @foreach($errors->all() as $error)
<li>- {{ $error }}</li>@endforeach </ul>
@endif
Laravel menyediakan variabel $errors yang tersedia di semua tampilan. Variabel ini memungkinkan akses ke kesalahan yang dilaporkan oleh aplikasi. Misalnya, kesalahan ditemukan saat mengirimkan formulir dengan input yang tidak lengkap atau tidak valid. Dalam kode sebelumnya, Kita menampilkan semua kesalahan tersebut.
<form method="POST" action="{{ route('admin.product.store') }}"> @csrf
…
<button type="submit" class="btn btn-primary">Submit</button> </form>
Selanjutnya, kita memiliki formulir HTML. Formulir ini menentukan metode POST dan mengaitkan formulir dengan Routes admin.product.store (Routes yang ditentukan di bagian sebelumnya). Metode POST digunakan untuk mengirimkan data ke server aplikasi. Laravel memerlukan untuk menyertakan bidang token CSRF tersembunyi untuk semua formulir HTML kita. Token itu melindungi kita dari serangan CSRF (info lebih lanjut di sini: https://owasp.org/www-community/attacks/csrf). Untuk membuat token tersebut, kita menggunakan direktif Blade @csrf. Terakhir, kita memiliki tombol submit untuk mengirimkan formulir.
<label class="col-lg-2 col-md-6 col-sm-12 col-form-label">Nama:</label>
<div class="col-lg-10 col-md-6 col-sm-12">
<input name="name" value="{{ old('name') }}" type="text" class="form-control"> </div>
Sisanya dari kode menunjukkan input formulir, tombol, dan area teks. Formulir dan elemen tersebut didesain berdasarkan Bootstrap Forms (https://getbootstrap.com/docs/5.1/forms/overview/). Mereka menunjukkan input untuk memasukkan nama produk. Kita juga menggunakan value="{{ old('name') }}" sebagai nilai input. Pembantu old Laravel digunakan untuk menampilkan kembali nilai input yang sebelumnya dikumpulkan jika kita menemukan beberapa kesalahan.
Catatan: kita belum mengumpulkan gambar produk. Kita akan melakukannya di bab berikutnya.
Memodifikasi AdminProductController
Selanjutnya, kita membuat metode store di AdminProductController. Di app/Http/Controllers/Admin/AdminProductController.php, lakukan perubahan berikut dalam teks tebal.
class AdminProductController extends Controller
{
...
public function store(Request $request)
{
$request->validate([
"name" => "required|max:255",
"description" => "required",
"price" => "required|numeric|gt:0",
'image' => 'image',
]);
$newProduct = new Product();
$newProduct->setName($request->input('name'));
$newProduct->setDescription($request->input('description')); $newProduct->setPrice($request->input('price'));
$newProduct->setImage("game.png");
$newProduct->save();
return back();
}
}
Mari analisis kode sebelumnya per bagian.
Analyze Code
$request->validate([
"name" => "required|max:255",
"description" => "required",
"price" => "required|numeric|gt:0",
'image' => 'image',
]);
Mari kita analisis kodenya:
public function store(Request $request)
{
$request->validate([
"name" => "required|max:255", "description" => "required",
"price" => "required|numeric|gt:0", 'image' => 'image',]);
Fungsi store menerima objek $request. Objek ini memungkinkan kita untuk berinteraksi dengan permintaan HTTP yang ditangani oleh aplikasi kita. Ini juga memungkinkan kita untuk mengambil input, cookie, dan file yang dikirimkan dengan permintaan.
Selanjutnya, Kita menggunakan metode validate yang disediakan oleh objek $request. Jika aturan validasi berhasil, kode akan terus berjalan seperti biasa. Namun, pengecualian akan dilemparkan jika validasi gagal, dan tanggapan kesalahan yang tepat akan secara otomatis dikirimkan kembali ke pengguna. Kesalahan itu akan ditampilkan dalam tampilan product/index.blade.php melalui variabel global $errors.
Dalam kasus Kita, nama dan deskripsi wajib diisi, dan nama memiliki panjang maksimum 255 karakter. Selain itu, harga wajib diisi, harus numerik, dan lebih besar dari nol. Kemudian, Kita memvalidasi input gambar berisi hanya file gambar (ini akan digunakan di bab berikutnya). Anda dapat menemukan aturan validasi yang tersedia di sini: https://laravel.com/docs/9.x/validation#available-validation-rules.
$newProduct = new Product();
$newProduct->setName($request->input('name'));
$newProduct->setDescription($request->input('description')); $newProduct->setPrice($request->input('price'));
$newProduct->setImage("game.png"); $newProduct->save();
Selanjutnya, Kita membuat sebuah instans $newProduct. Kemudian, Kita menetapkan atribut $newProduct berdasarkan nilai yang dikumpulkan dari formulir. Kita menggunakan metode request->input untuk mengambil input formulir. Kita juga menetapkan gambar default (game.png). Pada akhirnya, Kita memanggil metode save, yang memasukkan data objek ke dalam database. Timestamps created_at dan updated_at model akan otomatis diatur ketika metode save dipanggil, sehingga tidak perlu mengaturnya secara manual.
Catatan: menetapkan satu per satu setiap atribut model memiliki masalah. Ketika sebuah model memiliki banyak atribut, itu mengimplikasikan memanggil setter secara manual. Kita akan melihat alternatif di akhir bab ini.
return back();
Terakhir, Kita memanggil pembantu back mengarahkan pengguna kembali ke lokasi sebelumnya.
TIPS: Jika Anda memiliki input yang wajib diisi, sertakan atribut required ke input HTML (https://www.w3schools.com/tags/att_input_required.asp). Dengan cara ini, kita juga dapat memvalidasi input menggunakan browser klien. Kita tidak mengimplementasikannya karena Kita ingin menunjukkan bagaimana validasi Laravel bekerja. Tetapi Anda seharusnya refactor semua input yang diperlukan dengan strategi sebelumnya.
Menjalankan aplikasi
Di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut dalam teks tebal.
php artisan serve
Sekarang buka Routes ("/admin/products") dan Anda akan melihat formulir baru. Pertama, lengkapi formulir dengan data yang tidak valid. Kemudian, saat Anda menyelesaikan dan mengirimkan formulir dengan data yang valid , Anda akan melihat produk baru terdaftar (lihat gambar).
gambar
Alternatif penyimpanan produk lainnya
Ada alternatif penyimpanan produk lainnya. Kita tidak akan mengkodekan alternatif ini ke dalam aplikasi. Jika Anda ingin menerapkan alternatif ini, Kita menyarankan Anda membuat salinan lengkap dari proyek asli dan menerapkan perubahan berikut ke salinan proyek.
Mari diskusikan bagaimana alternatif ini bekerja. Berikut adalah potongan kode app/Http/Controllers/Admin/AdminProductController.php, dengan beberapa perubahan.
public function store(Request $request) {
$request->validate([
"name" => "required|max:255",
"description" => "required",
"price" => "required|numeric|gt:0",
'image' => 'image',
]);
$newProduct = new Product();
$newProduct->setName($request->input('name'));
$newProduct->setDescription($request->input('description')); $newProduct->setPrice($request->input('price'));
$newProduct->setImage("game.png");
$newProduct->save();
$creationData = $request->only(["name","description","price"]); $creationData["image"] = "game.png";
Product::create($creationData);
return back();
}
Seperti yang Anda lihat, Kita menghapus pembuatan instans produk dan setter. Alih-alih itu, Kita membuat array asosiatif bernama creationData dengan name, description, dan price yang dikumpulkan dari formulir (melalui metode $request->only). Kemudian, Kita menambahkan data gambar ke array dengan nilai gambar default (game.png). Dan, Kita memanggil metode Product::create. Yang kita lewatkan ke metode tersebut adalah array creationData, yang berisi data produk. Metode create (yang menerima array atribut) membuat model dan memasukkannya ke dalam database.
Keuntungan dari opsi ini adalah bahwa kita tidak perlu menetapkan satu per satu setiap atribut. Namun, kerugiannya dari opsi ini adalah bahwa itu tidak pernah memanggil setter klasik yang kita tentukan di model Produk. Kadang-kadang, setter berguna untuk menambahkan fungsionalitas untuk memodifikasi cara kita ingin menyimpan atribut model.
Catatan: jika Anda ingin menerapkan strategi sebelumnya, Anda juga perlu memodifikasi model Produk. Anda perlu menyertakan kode berikut di file app/Models/Product.php. Ingat, Kita tidak akan mengkodekan alternatif ini ke dalam aplikasi.
Laravel melindungi kita dari kerentanan mass assignment secara default. Secara default, kita tidak dapat membuat produk baru dengan memanggil metode create dan melewatkan array dengan banyak data yang merujuk pada atribut model kita. Untuk mengatasi masalah ini, kita harus menentukan atribut yang disebut fillable di model kita. Kemudian, kita menentukan atribut spesifik mana yang dapat ditetapkan oleh metode create untuk membuat produk baru. Dalam kasus ini, kita akan memungkinkan menetapkan data nama, deskripsi, harga, dan gambar untuk membuat produk baru.
Catatan untuk pengembang Laravel yang lebih lanjut: ada alternatif untuk terus menggunakan metode Product::create, yang pada saat yang sama memanggil setter klasik kita. Pilihan ini membutuhkan membuat "trait PHP" yang menggantikan dua metode Laravel, hasSetMutator dan setMutatedAttributeValue dan memerlukan inklusi trait itu di model. Berikut adalah tautan repositori dengan solusi khusus itu: https://github.com/idiarso/laravelku dan di sini Anda dapat menemukan perubahan kode spesifik: https://github.com/idiarso/laravelku/blob/main/app/Http/Controllers/Admin/AdminProductController.php. Kita tidak akan menjelaskan strategi ini secara detail. Namun, jika Anda memiliki pertanyaan atau solusi yang lebih baik, ingat untuk menggunakan zona diskusi repositori buku.
Pastikan Xampp atau web server anda sudah dijalankan
Tidak ada komentar:
Posting Komentar