Dalam tutorial kali ini, kita akan membuat QR Code atau Barcode di Laravel. Dalam kasus ini kita akan menggunakan simpel tabel product yang sudah kita buat sebelumnya di tutorial Import Excel ke database mySQL di laravel 10.
Langkah 1: Buat Model dan Migration
Kita buat ulang tabel product dengan membuat model Product dengan kolom name, description, dan price dalam migration. Buat model Product berikut:
php artisan make:model Product -m
Edit file create_products_table.php di folder app/database/migrations:
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description');
$table->decimal('price', 8, 2);
$table->timestamps();
});
}
Jalankan migration untuk membuat tabel products:
php artisan migrate
Langkah 2: Install Paket Barcode
Install paket milon/barcode untuk menghasilkan barcode dan QR code di Laravel.
composer require milon/barcode
agar package barcode ini dapat dipanggil secara global, Anda perlu menambahkan BarcodeServiceProvider ke dalam config/app.php. Berikut cara melakukannya:
Buka File config/app.php.
Tambahkan Provider: Di bagian providers, tambahkan Milon\Barcode\BarcodeServiceProvider::class, seperti berikut:
'providers' => [
// Providers Laravel lainnya...
Milon\Barcode\BarcodeServiceProvider::class,
],
Tambahkan Aliases: Untuk mempermudah penggunaan, tambahkan juga alias di bagian aliases:
'aliases' => [
// Aliases Laravel lainnya...
'DNS1D' => Milon\Barcode\Facades\DNS1DFacade::class,
'DNS2D' => Milon\Barcode\Facades\DNS2DFacade::class,
],
Langkah 3: Buat Model dan Controller untuk Produk
Buat Model Produk:
php artisan make:model Product
Edit file Product.php model, menjadi sebagai berikut:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = ['name', 'description', 'price'];
}
Buat Controller Produk:
php artisan make:controller ProductController --resource
Lalu edit file ProductController.php yang sudah kita buat menjadi sebagai berikut:
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
use Milon\Barcode\Facades\DNS1D;
use Milon\Barcode\Facades\DNS2D;
class ProductController extends Controller
{
// Menampilkan semua produk
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
// Menampilkan form untuk membuat produk baru
public function create()
{
return view('products.create');
}
// Menyimpan produk baru
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required|numeric',
]);
$product = Product::create($request->all());
return redirect()->route('products.index')
->with('success', 'Product created successfully.');
}
// Menampilkan produk
public function show($id)
{
$product = Product::findOrFail($id);
return view('products.show', compact('product'));
}
// Menampilkan form edit produk
public function edit($id)
{
$product = Product::findOrFail($id);
return view('products.edit', compact('product'));
}
// Mengupdate produk
public function update(Request $request, $id)
{
$request->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required|numeric',
]);
$product = Product::findOrFail($id);
$product->update($request->all());
return redirect()->route('products.index')
->with('success', 'Product updated successfully.');
}
// Menghapus produk
public function destroy($id)
{
$product = Product::findOrFail($id);
$product->delete();
return redirect()->route('products.index')
->with('success', 'Product deleted successfully.');
}
}
Definisikan Route CRUD: Tambahkan route untuk CRUD produk di routes/web.php:
use App\Http\Controllers\ProductController;
Route::resource('products', ProductController::class);
Langkah 4: Implementasi Views untuk CRUD
Berikut adalah beberapa view tambahan untuk implementasi CRUD produk.
Buat folder resources/views/products dan buat file (create.blade.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buat Produk Baru</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Buat Produk Baru</h2>
<form action="{{ route('products.store') }}" method="POST">
@csrf
<div class="form-group">
<label>Nama Produk</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Deskripsi</label>
<textarea name="description" class="form-control" required></textarea>
</div>
<div class="form-group">
<label>Harga</label>
<input type="text" name="price" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
</div>
</body>
</html>
Buat file Daftar Produk (index.blade.php) di folder yang sama:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Daftar Produk</h2>
<a href="{{ route('products.create') }}" class="btn btn-success mb-2">Tambah Produk</a>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama</th>
<th>Deskripsi</th>
<th>Harga</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $product->name }}</td>
<td>{{ $product->description }}</td>
<td>${{ $product->price }}</td>
<td>
<a href="{{ route('products.show', $product->id) }}" class="btn btn-info">Lihat</a>
<a href="{{ route('products.edit', $product->id) }}" class="btn btn-primary">Edit</a>
<form action="{{ route('products.destroy', $product->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
Dan buat file show.blade.php, untuk show barcode atau QR code isi dengan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Produk</title>
</head>
<body>
<h1>{{ $product->name }}</h1>
<p>{{ $product->description }}</p>
<p>Harga: ${{ $product->price }}</p>
<h3>Barcode:</h3>
{{-- Barcode 1D menggunakan kode produk --}}
{!! DNS1D::getBarcodeHTML($product->id, 'C39') !!}
<h3>QR Code:</h3>
{{-- QR Code 2D --}}
{!! DNS2D::getBarcodeHTML((string) $product->id, 'QRCODE') !!}
<br><br>
<a href="{{ route('products.index') }}">Kembali ke daftar produk</a>
</body>
</html>
Langkah 4: Coba dan Test
Lakukan testing dengan mengakses URL http://localhost:8000/products untuk melihat daftar produk, menambahkan, dan melihat barcode/QR Code untuk setiap produk.
http://localhost:8000/products
Dan ketika klik lihat, maka barcode dan QR Code akan muncul seperti berikut:
Selamat Mencoba!!
Tinggalkan komentar jika ada yang mau didiskusikan. Terimakasih :)