Generate QR from URL
Oleh 5D SYAFIRA ZULFA di 24 Sep 2025 | 19:59
A. Persiapan
Lingkungan pengembangan yang tepat adalah fondasi dari sebuah proyek. Kita akan menggunakan Laragon karena kemudahannya dalam mengelola PHP, Apache, MySQL, dan alat-alat lain secara otomatis.
1. Langkah Awal
cari Laragon, kemudia klik kanan pada aplikasi Laragon di hasil pencarian, lalu pilih Run as administrator. Klik Yes jika ada konfirmasi, setelah itu klik tombol Start All.
B. Mengatasi Masalah Error zip extension
Ini adalah langkah troubleshooting jika mengalami kegagalan saat instalasi paket Composer. Jika instalasi lancar, Anda bisa melewati bab ini.
1. Identifikasi File php.ini yang Aktif
Pertama, kita pastikan file mana yang harus diedit. Buka Terminal bawaan laragon dan jalankan perintah php --ini, catat path yang muncul pada baris Loaded Configuration File.
2. Mengedit php.ini untuk Mengaktifkan Ekstensi zip
Buka File Explorer dan navigasikan ke path php.ini kemudia buka file tersebut dengan editor teks, cari baris ;extension=zip hapus titik koma (;) di awal baris untuk mengaktifkannya setalahnya simpan dan tutup file tersebut.
3. Restart Terminal dan Verifikasi Perubahan
Tutup terminal yang sedang terbuka lalu buka kemabali jendela terminal baru dari Laragon. Jalankan perintah verifikasi php -m | findstr zip. Jika kata zip muncul, berarti ekstensi sudah aktif dan masalah teratasi.
C. Membuat Proyek Laravel
Dengan lingkungan yang sudah siap, kita akan membuat kerangka kerja aplikasi. Di dalam terminal Laragon, pastikan kamu berada di direktori www. Jika tidak, jalankan cd www. Jalankan perintah untuk membuat proyek Laravel baru bernama qr-generator
Setelah proses selesai, masuk ke direktori proyek qr-generator
D. Membangun Aplikasi QR Code Generator
Ini adalah inti dari modul, di mana kita akan menulis kode untuk semua fungsionalitas.
1. Instalasi Library QR Code
Kita membutuhkan bantuan paket eksternal untuk membuat QR code. Instal melalui Composer. composer require simplesoftwareio/simple-qrcode
2. Membuat dan Mengisi Logika Controller
Controller berfungsi sebagai otak yang mengatur alur data dan logika. Buat controller baru dengan perintah php artisan make:controller QrCodeController.
kemudian buka file yang baru dibuat di app/Http/Controllers/QrCodeController.php dan ubah seluruh isinya menjadi:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use SimpleSoftwareIO\QrCode\Facades\QrCode;
class QrCodeController extends Controller
{
public function index()
{
return view('generator');
}
public function generate(Request $request)
{
$request->validate(['url' => 'required|url']);
$qrCode = QrCode::size(300)->generate($request->url);
return view('generator', ['qrCode' => $qrCode, 'url' => $request->url]);
}
}
3. Mengkonfigurasi Rute
Rute adalah penunjuk jalan yang menghubungkan URL ke Controller. Buka file routes/web.php lalu ganti isinya menjadi:
<?php
use Illuminate\Support\Facades\Route;
// Import controller kita
use App\Http\Controllers\QrCodeController;
// Saat user membuka halaman utama ('/'), panggil method 'index'
Route::get('/', [QrCodeController::class, 'index']);
// Saat form di-submit ke alamat '/generate', panggil method 'generate'
Route::post('/generate', [QrCodeController::class, 'generate'])->name('qrcode.generate');
4. Mendesain Tampilan (View)
View adalah file yang berisi kode HTML untuk antarmuka pengguna. Buat file baru di resources/views/generator.blade.php. Isi dengan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background-color: #f0f2f5; }
.container { max-width: 550px; }
.card { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body>
<div class="container mt-5">
<div class="card p-4 rounded-4">
<h1 class="text-center mb-4">QR Code Generator 🚀</h1>
<form action="{{ route('qrcode.generate') }}" method="POST">
@csrf <div class="mb-3">
<label for="url" class="form-label fw-bold">Masukkan URL Anda:</label>
<input type="url" class="form-control form-control-lg @error('url') is-invalid @enderror"
id="url" name="url" placeholder="https://www.google.com" value="{{ $url ?? old('url') }}" required>
@error('url')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</div>
</form>
@isset($qrCode)
<div class="mt-4 text-center">
<hr>
<h4 class="mb-3">Ini QR Code Anda:</h4>
<div class="p-3 d-inline-block border rounded bg-white">
{{-- Tanda {!! !!} digunakan untuk merender SVG/HTML --}}
{!! $qrCode !!}
</div>
<p class="mt-2 text-muted fst-italic">Untuk URL: <strong>{{ $url ?? old('url') }}</strong></p>
</div>
@endisset
</div>
<footer class="text-center text-muted mt-4">
<p>Dibuat dengan Laravel di Laragon</p>
</footer>
</div>
</body>
</html>
E. Pengujian
Dengan semua bagian sudah terpasang, saatnya melakukan pengujian akhir.
1. Mengakses Aplikasi
Pastikan Laragon masih berjalan dalam mode administrator dan sudah di Start All. Klik kanan menu web, pilih www, lalu klik qr-generator.
2. Skenario Pengujian
Kamu akan melihat sebuah form input. Masukkan URL yang valid, contohnya https://kampusklik.com/login
Klik tombol Generate haalaman akan refresh dan menampilkan gambar QR Code di bagian bawah.
Gunakan aplikasi pemindai QR di ponsel untuk memindai gambar tersebut dan pastikan hasilnya sesuai dengan URL yang kamu masukkan.
Login untuk membalas
Silakan login untuk membalas topik ini