.png)
Membuat Produk dengan Gambar
Pada bab sebelumnya, Kita membuat semua produk Kita dengan gambar default game.png. Mari lihat bagaimana menggunakan sistem Penyimpanan Laravel untuk mengunggah gambar produk Kita.
Penyimpanan Laravel
Laravel menyediakan abstraksi sistem file yang kuat berkat paket PHP Flysystem oleh Frank de Jonge. Integrasi Flysystem Laravel menyediakan driver sederhana untuk bekerja dengan sistem file lokal, SFTP, dan Amazon S3 (https://laravel.com/docs/9.x/filesystem).
Laravel menyediakan kelas bernama Storage. Kelas ini berisi serangkaian metode yang memungkinkan membuat, menghapus, dan memindahkan file dan direktori. Ini juga memungkinkan menentukan jenis disk yang ingin kita interaksikan (mis., disk lokal atau Amazon S3).
Mari modifikasi formulir produk admin kita untuk menyertakan pemilihan gambar produk, dan nanti kita akan menggunakan kelas Storage Laravel untuk menyimpan gambar Kita.
Memodifikasi tampilan admin/product/index View
Di resources/views/admin/product/index.blade.php, lakukan perubahan berikut dalam teks tebal.
@extends('layouts.admin')
@section('title', $viewData["title"])
@section('content')
...
<form method="POST" action="{{ route('admin.product.store') }}" enctype="multipart/form-data"> @csrf
<div class="row">
...
</div>
<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">Image:</label> <div class="col-lg-10 col-md-6 col-sm-12">
<input class="form-control" type="file" name="image">
</div>
</div>
</div>
<div class="col">
</div>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
Kita menyertakan atribut enctype="multipart/form-data" dalam formulir Kita. Atribut ini digunakan dalam elemen formulir yang memiliki unggahan file. Kemudian, Kita menambahkan input unggahan file untuk memungkinkan admin memilih gambar produk.
Memodifikasi AdminProductController
Di app/Http/Controllers/Admin/AdminProductController.php, lakukan perubahan berikut dalam teks tebal.
<?php
...
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class AdminProductController extends Controller {
...
public function store(Request $request) {
...
$newProduct->save();
if ($request->hasFile('image')) {
$imageName = $newProduct->getId().".".$request->file('image')->extension(); Storage::disk('public')->put(
$imageName,file_get_contents($request->file('image')->getRealPath())
);
$newProduct->setImage($imageName);
$newProduct->save();
}
return back();
} }
Kita menyertakan pustaka Penyimpanan Laravel. Kemudian, Kita memeriksa apakah gambar diunggah dengan menggunakan metode $request->hasFile. Jika gambar diunggah, Kita mendapatkan id newProduct dan menggunakannya sebagai dasar untuk menentukan imageName. Sebagai contoh, jika Kita membuat produk baru dan itu dimasukkan dengan id 8, dan Kita juga mengunggah gambar untuk produk tersebut. Kemudian, Kita akan memperbarui nilai gambar produk dengan id produk, ditambah titik, ditambah ekstensi gambar (mis., 8.png).
Kita juga menetapkan Penyimpanan dengan disk publik. Disk ini ditujukan untuk file yang akan diakses secara publik (seperti gambar produk Kita). Disk publik menyimpan file di folder storage/app/public secara default. Metode put akan menyimpan gambar produk Kita di atas disk publik.
Untuk membuat file ini dapat diakses dari web, kita harus membuat "tautan simbolis" dari public/storage ke storage/app/public. Kemudian, di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut:
php artisan storage:link
Kemudian, Anda akan melihat sesuatu seperti hasil . Kita perlu membuat "tautan simbolis" ini karena setelah kita menjalankan aplikasi kita (dengan php artisan serve), pengguna hanya dapat mengakses file yang terletak di dalam folder public/. Sisanya dari folder dan file tidak dapat diakses.
Memodifikasi tampilan product/index dan product/show
Di resources/views/product/index.blade.php, lakukan perubahan berikut dalam teks tebal.
...
@foreach ($viewData["products"] as $product)
...
<img src="{{ asset('/storage/'.$product->getImage()) }}" class="card-img-top">
...
Di resources/views/product/show.blade.php, lakukan perubahan berikut dalam teks tebal.
...
<div class="col-md-4">
<img src="{{ asset('/storage/'.$viewData["product"]->getImage()) }}" class="img-fluid rounded-start"> </div>
...
Kita mengakses gambar produk melalui path folder penyimpanan.
Menjalankan aplikasi
Di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut:
php artisan serve
Buka Routes ("/admin/products") dan Anda akan melihat formulir baru (lihat gambar). Kemudian, lengkapi formulir, unggah gambar, dan buat produk baru. Online Store – Formulir pembuatan produk dengan pemilihan gambar.
Akses ke Routes ("/products"). Anda akan melihat produk baru dengan gambar yang sesuai. Namun, gambar produk lama tidak dimuat. Ini karena Kita mengubah path dari mana Kita memuat gambar tersebut. Jangan khawatir. Pada bab berikutnya, Kita akan menerapkan cara untuk mengedit produk Kita dan mengunggah gambar yang sesuai untuk sisa produk Kita.
gambar:Toko Online – Daftar produk dengan gambar yang diunggah.
Diskusi singkat: Ada keuntungan besar menggunakan Penyimpanan Laravel untuk mengunggah gambar produk. Sebelumnya, Kita secara manual mengunduh dan menambahkan gambar produk ke folder public/img. Tugas manual ini tidak dapat ditingkatkan. Ini membutuhkan akses ke kode aplikasi (tetapi tidak semua admin akan memiliki akses tersebut). Sekarang, Kita mengotomatisasi proses ini dengan formulir pendaftaran produk dan Penyimpanan Laravel.
Tidak ada komentar:
Posting Komentar