skip to Main Content
Membuat Qr Code Generator Dengan Laravel 9

Membuat qr code generator dengan laravel 9

Membuat QR Code Generator dengan Laravel 9

 

Pada artikel kali ini, kita akan membuat aplikasi QR Code Generator dengan cara yang sedikit berbeda, yaitu dengan menggunakan laravel. Penasaran? Berikut ini adalah langkah-langkah membuat QR Code Generator dengan laravel.

1. Membuat Project Baru Laravel

Buat projek laravel dengan masuk ke direktori dimana Anda ingin membuat project laravel tersebut. Sama seperti petunjuk dari laravel, kita bisa membuat projek baru dengan command seperti di bawah ini:

composer create-project --prefer-dist laravel/laravel qr-code-generator

 

Atau jika kalian sudah install laravel installer ke global dependency, kalian bisa langsung menggunakan command berikut ini: 

laravel new qr-code-generator

2. Install QR Code Package

Jika projek laravel sudah berhasil dibuat, selanjutnya masuk ke direktori projek tersebut dan jalankan command di bawah untuk menginstall Package dari endroid/qr-code seperti di bawah ini:

composer require endroid/qr-code

3. Membuat Controller.

Membuat File Controller Baru dengan Command Seperti di Bawah Ini

php artisan make:controller QrController

4. Membuat Helper

Sebelum edit  controller kita membutuhkan function untuk merubah hex color menjadi decimal contoh “#FFFFFF” menjadi (255,255,255) maka kita membutuhkan sebuah helper. Untuk itu mari kita membuat helper dengan cara membuat folder helper di dalam folder app dan buat file php dengan nama color.php dan isi dengan code berikut:

<?php
function hexToRgb($hex, $alpha = false)
{
    $hex = str_replace('#', '', $hex);
    $length = strlen($hex);
    $rgb['r'] = hexdec($length == 6 ? substr($hex, 0, 2) : ($length == 3 ? str_repeat(substr($hex, 0, 1), 2) : 0));
    $rgb['g'] = hexdec($length == 6 ? substr($hex, 2, 2) : ($length == 3 ? str_repeat(substr($hex, 1, 1), 2) : 0));
    $rgb['b'] = hexdec($length == 6 ? substr($hex, 4, 2) : ($length == 3 ? str_repeat(substr($hex, 2, 1), 2) : 0));
    if ($alpha) {
        $rgb['a'] = $alpha;
    }
    return $rgb;
}

Ubah autoload pada composer.json seperti code berikut:

    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        },
        "files": [
            "app/Helper/color.php"
         
        ]
    },

Kemudian jalankan perintah berikut di terminal: 

composer dump-autoload

5. Edit Controller 

Buka file QRController yang sudah dibuat pada langkah ke 3 tadi, kemudian edit code menjadi seperti di bawah ini.

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelHigh;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Label\Label;
use Endroid\QrCode\Logo\Logo;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeEnlarge;
use Endroid\QrCode\Writer\PngWriter;


class QrController extends Controller
{
    public function index()
    {
        return view('welcome');
    }


    public function create(Request $req)
    {
        $rgbLabel = hexToRgb($req->labelColor);
        $rgbFore = hexToRgb($req->ForegroundColor);
        $rgbBack = hexToRgb($req->BackgroundColor);
        $write = new PngWriter();
        $qrCode = QrCode::create($req->url)
            ->setEncoding(new Encoding('UTF-8'))
            ->setErrorCorrectionLevel(new ErrorCorrectionLevelHigh())
            ->setSize(500)
            ->setMargin(10)
            ->setRoundBlockSizeMode(new RoundBlockSizeModeEnlarge)
            ->setForegroundColor(new Color($rgbFore['r'], $rgbFore['g'], $rgbFore['b']))
            ->setBackgroundColor(new Color($rgbBack['r'], $rgbBack['g'], $rgbBack['b']));
        $label = null;
        if ($req->label) {
            $label = Label::create($req->label)->setTextColor(new Color($rgbLabel['r'], $rgbLabel['g'], $rgbLabel['b']));
        }
        if ($req->hasFIle('image')) {
            if (!$req->logoWidth) {
                $logo = Logo::create($req->image)
                    ->setResizeToHeight($req->logoHeight);
            } elseif (!$req->logoHeight) {
                $logo = Logo::create($req->image)
                    ->setResizeToWidth($req->logoWidth);
            } elseif (!$req->logoHeight && !$req->logoWidth) {
                $logo = Logo::create($req->image);
            } else {
                $logo = Logo::create($req->image)
                    ->setResizeToWidth($req->logoWidth)
                    ->setResizeToHeight($req->logoHeight);
            }
            $result = $write->write($qrCode, $logo, $label);
        } else {
            $result = $write->write($qrCode, null, $label);
        }
        return $result->getDataUri();
    }
}

Function index digunakan untuk mendirect route ke file welcome.blade.php.


Function create akan menerima data berupa custom color untuk QR, Logo, Label dan juga ukuran logo. Kemudian akan membuat QR dan mengembalikan QR dalam bentuk base64. 

6. Membuat Route

Setelah membuat controller, kita akan membuat route untuk menentukan respon endpoint nantinya. Kemudian kita akan memberikan nama pada route tersebut agar lebih mudah dipanggil nantinya. Buka file web.php yang ada di folder routes, kemudian edit menjadi seperti di bawah ini:

7. Membuat View untuk Membuat QR

Buka file welcome.blade.php yang ada di folder views, kemudian edit menjadi seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
        integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <title>Qr-Code ETG</title>
</head>


<body>
    <div class="container">
        <h2>Qr Code ETG</h2>
        <div class="row">
            <div class="col">
                <form action="javascript:void(0)" enctype="multipart/form-data" id="qr-form">
                    @csrf
                    <div class="form-group">
                        <label>Your Url</label>
                        <input type="text" name="url" class="form-control" placeholder="url" required
                            id="url">
                        <label>Foreground Color</label>
                        <input type="color" id="ForegroundColor" name="ForegroundColor" value="#000000">
                        <label>Background Color</label>
                        <input type="color" id="BackgroundColor" name="BackgroundColor" value="#FFFFFF"><br>
                        <label>Label</label>
                        <input type="text" name="label" class="form-control" placeholder="label">
                        <label>Label Text Color</label>
                        <input type="color" id="labelColor" name="labelColor" value="#000000">
                        <label>Logo</label>
                        <input type="file" name="image" class="form-control-file"
                            accept="image/gif, image/jpeg, image/png">
                        <label>Logo Width</label>
                        <input type="number" inputmode="numeric" name="logoWidth" class="form-control number"
                            placeholder="Logo Width" min="50">
                        <label>Logo Height</label>
                        <input type="number" name="logoHeight" class="form-control number" placeholder="Logo Height"
                            min="50">
                    </div>
                    <button class="btn btn-success" id="buat-qr">Buat QR</button>
                    <a style="display:none" class="btn btn-primary" id="download-btn" download>Download</a>
                </form>
            </div>
            <div class="col">
                <div id="image" class="text-center">


                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/index.js') }}"></script>
</body>


</html>

8. Membuat Javascript 

Buat file js agar page tidak reload saat generate QR seperti pada Membuat CRUD Tanpa Reload. Buat folder js pada folder public kemudian buat file index.js dan masukan code di bawah ini:

var image;
$("#qr-form").on("submit", function (e) {
    e.preventDefault();
    if (image) {
        document.getElementById("download-btn").href = image;
        document.getElementById("download-btn").style.display = "";
    }
});


$("#qr-form").on("change", function (e) {
    e.preventDefault();
    if ($("#url").val()) {
        var formData = new FormData(this);
        $.ajax({
            type: "POST",
            url: "/qr/create",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                document.getElementById("image").innerHTML = "<h2>Preview</h2>";
                image = data;
                console.log("success");
                // console.log(data);
                const myImage = new Image(500, 500);
                myImage.src = data;
                document.getElementById("download-btn").href = data;
                document.getElementById("download-btn").style.display = "none";
                document.getElementById("image").appendChild(myImage);
            },
            error: function (data) {
                console.log("error");
                console.log(data);
            },
        });
    }
});

 

Oke, sekarang kita coba jalankan programnya dengan menjalankan server (php artisan serve). Buka url 127.0.0.1:8000

Tampilan halaman depan atau dari file welcome.blade.php akan seperti gif di atas, kita bisa ganti url, warna dan juga custom logonya dan ditampilkan pada preview kemudian ketika kita klik Buat QR, akan muncul button download untuk mendownload QR. Di bawah adalah hasil dari QR Generator buatan kita tadi:

Demikian pembahasan kita kali ini. Untuk kalian yang berminat belajar lebih lanjut tentang pemrograman php dan bahasa pemrograman lainnya, silahkan kunjungi social media Xsis Academy untuk mendapatkan informasi lebih lanjut mengenai Bootcamp Xsis Academy atau instagram Xsis Academy.

 

Untuk full source codenya dapat di download di : https://github.com/brahmantiodiaz/qr-code-generator

 

———–

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
Table Of Content