.png)
Membuat Daftar Produk dengan Data Dummy
Pada pembahasan kali ini, kita akan mengimplementasikan fungsionalitas untuk menampilkan semua produk dan dapat mengklik produk tersebut untuk menampilkan data mereka di bagian terpisah.
Memodifikasi rute
Mari kita mulai dengan menyertakan beberapa rute untuk menampilkan produk dan menampilkan data dari satu produk tunggal. Di routes/web.php, lakukan perubahan berikut dengan tebal.
Route::get('/', 'App\Http\Controllers\HomeController@index')->name("home.index");Route::get('/about', 'App\Http\Controllers\HomeController@about')->name("home.about");Route::get('/products', 'App\Http\Controllers\ProductController@index')->name("product.index");Route::get('/products/{id}', 'App\Http\Controllers\ProductController@show')->name("product.show");
Kita akan menampilkan semua produk aplikasi di routes pertama ("/products"). Routes kedua akan digunakan untuk menampilkan data dari satu produk. “/products/{id}” mengambil parameter bernama id. Parameter ini adalah id produk untuk mengidentifikasi data produk mana yang akan ditampilkan. Misalnya, jika kita mengakses “/products/1”, aplikasi akan menampilkan data produk dengan id=1.
Jika Anda perhatikan, kedua rute terhubung ke ProductController. Jadi, mari kita implementasikan.
ProductController
Di app/Http/Controllers, buat berkas baru ProductController.php dan isi dengan kode berikut.
[code hl="1, 4, 7"]
"1", "name"=>"War", "description"=>"Best War Game", "image" => "game.png", "price"=>"100"],
["id"=>"2", "name"=>"Aneka Mainan", "description"=>"Best Toys", "image" => "mainan.png", "price"=>"10"],
["id"=>"3", "name"=>"Perkakas", "description"=>"DIY Perkakas", "image" => "perkakas.png", "price"=>"20"],
["id"=>"4", "name"=>"Kesehatan", "description"=>"Alat Kesehatan", "image" => "kesehatan.png", "price"=>"100"]
];
public function index()
{
$viewData = [];
$viewData["title"] = "Products - Toko Online";
$viewData["subtitle"] = "List Produk";
$viewData["products"] = ProductController::$products;
return view('product.index')->with("viewData", $viewData);
}
public function show($id)
{
$viewData = [];
$product = ProductController::$products[$id-1];
$viewData["title"] = $product["name"]." - Toko Online";
$viewData["subtitle"] = $product["name"]." - Informasi Produk";
$viewData["product"] = $product;
return view('product.show')->with("viewData", $viewData);
}
}
[/code]
mari kita analisis pada bagian:
public static $products = [["id"=>"1", "name"=>"War", "description"=>"Best War Game", "image" => "game.png", "price"=>"100"],
$products adalah sebuah array yang berisi kumpulan produk beserta datanya. Pada indeks array 0, kita memiliki produk dengan id=1 (War). Kita memiliki empat produk dummy. Saat ini, mereka disimpan sebagai atribut statis dari kelas ProductController. Nantinya, kita akan mengambil data produk dari database MySQL pada bab-bab berikutnya.
public function index(){$viewData = [];$viewData["title"] = "Products - Online Store";$viewData["subtitle"] = "List of products";$viewData["products"] = ProductController::$products;return view('product.index')->with("viewData", $viewData);}
Metode index mendapatkan array produk dan mengirimkannya ke tampilan product.index untuk ditampilkan.
public function show($id){$viewData = [];$product = ProductController::$products[$id-1];$viewData["title"] = $product["name"]." - Online Store";$viewData["subtitle"] = $product["name"]." - Product information";$viewData["product"] = $product;return view('product.show')->with("viewData", $viewData);}
Metode show mendapatkan $id sebagai parameter (id diambil dari URL). Kami mengekstrak data produk dengan id tersebut (periksa baris tebal). Kami mengurangkan satu unit karena kami menyimpan produk dengan id=1 dalam indeks array ProductController::$products 0, produk dengan id=2 dalam indeks array ProductController::$products 1, dan seterusnya. Kemudian, kami mengirimkan data produk ke tampilan product.show.
Produk Views
Mari pertama-tama mengimplementasikan tampilan product.index, dan kemudian, tampilan product.show.
Tampilan index produk
Di resources/views/, buat subfolder product. Kemudian, di resources/views/product, buat berkas baru index.blade.php dan isi dengan kode berikut.
@extends('layouts.app')@section('title', $viewData["title"])@section('subtitle', $viewData["subtitle"])@section('content')<div class="row">@foreach ($viewData["products"] as $product)<div class="col-md-4 col-lg-3 mb-2"><div class="card"><img src="{{ asset('/img/'.$product["image"]) }}" class="card-img-top img-card"><div class="card-body text-center"><a href="{{ route('product.show', ['id'=> $product["id"]]) }}" class="btn bg-primary text-white">{{ $product["name"] }}</a></div></div></div>@endforeach</div>@endsection
Bagian penting dari kode sebelumnya adalah @foreach. @foreach adalah sebuah direktif Blade yang memungkinkan kita untuk mengulang melalui sebuah daftar. Kami mengulangi setiap produk dan menampilkan gambar dan nama produk. Informasi lebih lanjut tentang direktif Blade dapat ditemukan di sini: https://laravel.com/docs/9.x/blade#blade-directives.
<a href="{{ route('product.show', ['id'=> $product["id"]]) }}"class="btn bg-primary text-white">{{ $product["name"] }}</a>
Terakhir, kami menambahkan tautan ke nama produk. Tautan tersebut akan merute ke rute product.show (didefinisikan sebelumnya di routes/web.php) dan memerlukan parameter yang akan dikirim. Dalam hal ini, kami mengirimkan id produk dari produk yang sedang diulang saat ini.
Tampilan detail produk
Di resources/views/product, buat berkas baru show.blade.php dan isi dengan kode berikut.
@extends('layouts.app')@section('title', $viewData["title"])@section('subtitle', $viewData["subtitle"])@section('content')<div class="card mb-3"><div class="row g-0"><div class="col-md-4"><img src="{{ asset('/img/'.$viewData["product"]["image"]) }}" class="img-fluid rounded-start"></div><div class="col-md-8"><div class="card-body"><h5 class="card-title">{{ $viewData["product"]["name"] }} (${{ $viewData["product"]["price"] }})</h5><p class="card-text">{{ $viewData["product"]["description"] }}</p><p class="card-text"><small class="text-muted">Add to Cart</small></p></div></div></div></div>@endsection
Kita menampilkan gambar, nama, dan deskripsi produk dalam kode di atas. Ingat, kami menggunakan produk dummy. Ini akan berubah di bab-bab berikutnya.
TIPS: Dalam contoh terakhir, kami telah menentukan struktur untuk menyimpan kontroler kami, metode kontroler, nama rute, dan tampilan. Misalnya, rute product.show terhubung ke metode show ProductController, yang menampilkan tampilan product/show. Cobalah menggunakan strategi ini di seluruh proyek karena memudahkan menemukan tampilan dari metode kontroler yang sesuai dan sebaliknya.
Memperbarui tautan di Header
Sekarang, mari masukkan tautan produk di header. Di resources/views/layouts/app.blade.php, lakukan perubahan berikut dengan tebal.
<!doctype html>...<div class="navbar-nav ms-auto"><a class="nav-link active" href="{{ route('home.index') }}">Home</a><a class="nav-link active" href="{{ route('product.index') }}">Products</a><a class="nav-link active" href="{{ route('home.about') }}">About</a></div>...
Menjalankan aplikasi
Di Terminal, pergilah ke direktori proyek, dan jalankan perintah berikut:
php artisan serve
Sekarang, Anda dapat pergi ke halaman Produk (lihat gambar) dan menavigasi ke produk tertentu (lihat gambar dibawah).
Jika anda mengalami kendala dalam penulisan kode dapat anda temukan dihttps://github.com/idiarso/laravelku
Tidak ada komentar:
Posting Komentar