CodeIgniter 4 : Membuat Barcode Sederhana Menggunakan PHP Barcode Generator

CodeIgniter 4 : Membuat Barcode Sederhana Menggunakan PHP Barcode Generator

Sobatcoding.com -  CodeIgniter 4 : Membuat Barcode Sederhana Menggunakan PHP Barcode Generator

Kalian pernah melihat garis garis hitam pada kemasan sebuah produk minuman ataupun makanan? Kira-kira apa itu ya?

Yup benar, itu adalah kode barcode. Barcode ini berisi data informasi seperti kode barang, harga barang, tanggal expired dan lain-lain.

Artikel kali ini kita akan membahas tentang cara membuat barcode sederhana menggunakan PHP Barcode Generator di CodeIgniter 4.

Pada kesempatan kali ini, kita akan belajar membuat barcode menggunakan PHP Barcode Library. Dengan library ini kita bisa membuat barcode dengan format HTML, JPG, PNG ataupun SVG.

 

Untuk penggunaan PHP Barcode Generator di Codeigniter 4, perhatikan langkah-langkah berikut :

  1. Silahkan kalian download terlebih dahulu library PHP Barcode Generator melalui link berikut ini : https://github.com/picqer/php-barcode-generator.
    Silahkan download menggunakan composer dengan menjalankan perintah berikut :
    composer require picqer/php-barcode-generator​
  2. Buatlah sebuah controller bernama Barcode.php dan tambahkan kode seperti berikut :
    <?php
    
    namespace App\Controllers;
    
    use Picqer;
    
    class Barcode extends BaseController
    {
    
        public function index()
        {
            $str = $this->request->getGet('text');
            $tipe= $this->request->getGet('tipe') ? $this->request->getGet('tipe') : "";
            $this->generateBarcode($str, $tipe);
        }
    
    
        private function generateBarcode( $string, $tipe ="HTML" )
        {
            
            switch($tipe)
            {
                case "HTML":
                    $generator = new Picqer\Barcode\BarcodeGeneratorHTML();
                    break;
                case "JPG":
                    header('Content-type: image/jpeg');
                    $generator = new Picqer\Barcode\BarcodeGeneratorJPG();
                    break;
                case "PNG":
                    $generator = new Picqer\Barcode\BarcodeGeneratorPNG();
                    break;
                case "SVG":
                    $generator = new Picqer\Barcode\BarcodeGeneratorSVG();
                    break;
                default:
                    $generator = new Picqer\Barcode\BarcodeGeneratorHTML();
            }
            
            $barcode   = $generator->getBarcode($string, $generator::TYPE_CODE_128);
            echo view("barcode", ["barcode" => $barcode, "text" => $string, "tipe" => $tipe]);
        }
    
    }​


    Dari kode di atas, terdapat function generatedBarcode() yang berfungsi untuk membuat barcode dalam beberapa format yaitu HTML, JPG, PNG ataupun SVG.
    Untuk tipe barcode ada bermacam-macam, yang paling umum digunakan adalah TYPE_CODE_128.
    Untuk lebih jelasnya tipe apa saja yang support kalian bisa membacanya di link berikut : https://github.com/picqer/php-barcode-generator

  3. Buatlah sebuah view bernama barcode.php dan masukkan kode berikut:
    <div class="barcode-conatiner">
        <?php if(in_array($tipe,["JPG", "PNG"]))
        {
            echo '<img src="data:image/png;base64,'. base64_encode($barcode).'"/>';
        }else{
            echo $barcode;
        }
        ?>
        <span class="barcode-text"><?php echo $text ?></span>
    </div>
    <style>
        .barcode-text {
            letter-spacing: 7px;
            margin-top: 7px;
            display: block;
        }
    </style>​
  4. Jalankan perintah php spark serve di terminal kalian masing-masing.
  5. Masuk ke browser dengan url http://localhost:8080/barcode?text=123456. Maka tampilan kurang lebih seperti berikut.

    Barcode
  6. Kalian juga bisa merubah text yang akan di barcode dengan mengganti parameter ?text= sesuai dengan keinginan kalian. Untuk merubah tipe HTML atau JPG kalian tinggal menambahkan parameter &tipe=JPG atau &tipe=SVG.
    Contoh url untuk format SVG adalah http://localhost:8080/barcode?text=123456&tipe=SVG  . Jika kita lakukan inspect element hasilnya seperti gambar berikut.
    Barcode

 

Sekian tutorial kali ini. Semoga bermanfaat.

Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.