BLANTERORIONv101

Cara Membuat QR Code di Laravel

4 Juni 2022
Cara Membuat QR Code di Laravel

Pada postingan kali ini saya akan memberikan contoh untuk Membuat QR Code di Laravel dengan mudah. Biasanya kita menemukan QR code pada produk-produk atau barang di sekitar kita. QR Code sendiri berfungsi untuk menyimpan identitas suatu produk ataupun barang.

Gambar 1. QR Code


simple-qrcode Merupakan sebuah paket composer untuk membuat atau generate QR Code di aplikasi laravel. simple-qrcode dapat kita arahkan ke sms, email, geo, website atau hanya untuk mengetahui data apa yang ada di balik QR code tersebut.

Langkah 1. Instal simple-qrcode

Pada langkah ini kita perlu untuk menginstal composer simple-qrcode pada aplikasi laravel kita, untuk menginstalnya anda bisa menjalankan perintah dibawah ini pada terminal anda :

composer require simplesoftwareio/simple-qrcode "~4"

Jika sudah maka sekarang kita perlu untuk pergi ke folder config/app.php dan tambahkan SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class pada providers dan juga 'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class pada aliases seperti dibawah ini :

'providers' => [

    ....

    SimpleSoftwareIOQrCodeQrCodeServiceProvider::class

],

'aliases' => [

    ....

    'QrCode' => SimpleSoftwareIOQrCodeFacadesQrCode::class

],

Langkah 2. Menambahkan Tabel & Model

Pada langkah ini kita akan menambahkan sebuah tabel untuk mengisi data-data kita dan sekaligus dengan Model. Untuk membuatnya sangat mudah hanya dengan kita menjalankan perintah dibawah ini pada terminal : 

php artisan make:model Data -m

Jika sudah maka anda akan menemukan satu file baru pada folder database/migrations dengan nama data yang terdapat pada paling bawah dan silahkan isi seperti kode di bawah ini :

<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
class CreateDataTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('data', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->bigInteger('phone');
            $table->string('instagram');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('data');
    }
}

Langkah 3. Menambahkan Controller

Kita perlu untuk menambah atau membuat satu controller untuk mengelola data kita. Silahkan jalankan perintah dibawah ini untuk membuat controller baru :

php artisan make:controller DataController

Jika maka anda akan mendapatkan satu file baru pada app/Https/Controllers dengan nama DataController.php. Silahkan isi dengan kode dibawah ini :

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use SimpleSoftwareIOQrCodeFacadesQrCode;
use AppModelsData;

class GenerateController extends Controller
{
    //Berfungsi untuk tampilkan data dari database
    public function index(){
        return view ('welcome')->with([
            'data' => Data::all(),
        ]);
    }

    //Berfungsi untuk menambahkan data ke database
    public function store(Request $request){
        Data::create([
            'name' => $request->name,
            'email' => $request->email,
            'phone' => $request->phone,
            'instagram' => $request->instagram,
        ]);
        return back();
    }

    //Berfungsi untuk generate data kita menjadi QR Code   
    public function generate ($id)
    {
        return view('qrcode')->with([
            'data' => Data::findOrFail($id),
            'qrcode' => QrCode::size(400)->generate($data->instagram),
        ]);
    }
}

Langkah 4. Menambahkan Route

Pada langkah ini kita akan menambahkan rute (route) pada routes/web.php seperti dibawah ini :
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersDataController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/qrcode', [DataController::class, 'index']);
Route::post('/qrcode', [DataController::class, 'store'])->name('store');
Route::get('qrcode/{id}', [DataController::class, 'generate'])->name('generate');

Langkah 5. Menambahkan file Blade

JIka sudah ikuti semua langkah-langkah di atas maka sekarang kita akan membuat file .blade.php pada resources/views/qrcode dengan nama index.blade.php dan qrcode.blade.php untuk menghasilkan tampilan kodingan kita di atas.
Silahkan isi file index.blade.php dengan kode dibawah ini : 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SarjanaIT.com - Cara Membuat QR Code di Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- Styles -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <style>
            body {
                font-family: 'Nunito';
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row mt-5 justify-content-around">
                <h2 class="text-center mb-3"><b>SarjanaIT.com</b> <br> Cara Membuat QR Code di Laravel</h2>
                <div class="card mb-3 shadow-sm">
                    <div class="card-body">
                        <form class="form-inline" action="{{ route('store') }}" method="POST">
                    @csrf
                    <div class="form-group mb-2">
                      <input type="text" class="form-control" name="name" placeholder="Masukkan Nama">
                    </div>
                    <div class="form-group mb-2 ml-1">
                        <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
                      </div>
                      <div class="form-group mb-2 ml-1">
                        <input type="number" class="form-control" name="phone" placeholder="Masukkan Nomor Telephone">
                      </div>
                      <div class="form-group mb-2 ml-1">
                        <input type="text" class="form-control" name="instagram" placeholder="Masukkan Instagram">
                      </div>
                    <button type="submit" class="btn btn-primary ml-1 mb-2">Create</button>
                  </form>
                    </div>
                </div>
                <br>
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">Nama</th>
                        <th scope="col">Email</th>
                        <th scope="col">Phone</th>
                        <th scope="col">Instagram</th>
                        <th scope="col">QR code</th>
                      </tr>
                    </thead>
                    <tbody>
                     @foreach ($data as $data)
                     <tr>
                        <td>{{ $data->name }}</td>
                        <td>{{ $data->email }}</td>
                        <td>{{ $data->phone }}</td>
                        <td>{{ $data->instagram }}</td>
                        <td>
                            <a href="{{ route('generate',$data->id) }}" target="_blank" class="btn btn-primary">Generate</a>
                        </td>
                      </tr>
                     @endforeach
                    </tbody>
                  </table>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </body>
</html>
Cara Membuat QR Code di Laravel
Gambar 2. Hasil dari file index.blade.php


dan selanjutnya silahkan isi file qrcode.blade.php dengan kode dibawah ini :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SarjanaIT.com - Cara Membuat QR Code di Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm:rounded-lg{border-radius:.5rem}.sm:block{display:block}.sm:items-center{align-items:center}.sm:justify-start{justify-content:flex-start}.sm:justify-between{justify-content:space-between}.sm:h-20{height:5rem}.sm:ml-0{margin-left:0}.sm:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm:pt-0{padding-top:0}.sm:text-left{text-align:left}.sm:text-right{text-align:right}}@media (min-width:768px){.md:border-t-0{border-top-width:0}.md:border-l{border-left-width:1px}.md:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <style>
            body {
                font-family: 'Nunito';
            }
        </style>
    </head>
    <body>
        <div class="container mt-5">
            <h2 class="text-center mb-3"><b>SarjanaIT.com</b> <br> Cara Membuat QR Code di Laravel</h2>
            <div class="row justify-content-center">
                <div class="card">
                    <div class="card-body shadow">
                        {!! $qrcode !!}
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </body>
</html>
Cara Membuat QR Code di Laravel
Gambar3. Hasil dari file qrcode.blade.php

Selesai.

Saya harap punya kalian juga berhasil dan tidak ada error, jika terdapat error silahkan bertanya pada kolom komentar dibawah ini.

Semoga postingan ini bermanfaat untuk teman-teman yang inign belajar dan membutuhkannya, terimakasih.

Komentar