Some text some message..
Some text some message..
Some text some message..
Some text some message..

Cara Mudah Menyisipkan Logo Pada QR Code Dengan PHP

previous Previous Page

QR Code atau kode respon cepat (Quick Response Code) merupakan salah satu bentuk dari barcode dua dimensi. QR Code akan memberikan akses cepat dengan menampilkan informasi data yang tersembunyi di dalam kode itu. QR Code banyak digunakan dalam industri logistik, perdagangan, ritel dan lainnya untuk mempermudah akses pergerakan barang. Seiring perkembangan teknologi, QR Code bisa dipakai sebagai kode yang bersifat pribadi yang berisi informasi akun tertentu untuk keperluan pembayaran transaksi elektronik. QR Code juga dapat digunakan untuk mengakses jaringan wifi dengan informasi data nama wifi disertai password.

QR Code disajikan dalam bentuk Image QR Code yang disusun atas kotak-kotak hitam dalam suatu grid dengan gambar latar putih. Secara default, gambar QR Code disajikan tidak disertai logo. Mungkin anda pernah menjumpai QR Code yang memiliki logo di dalamnya, dan QR Code tersebut dapat dipindai (discan) dengan baik oleh QR Code Scanner. Untuk keperluan tertentu, menyertakan logo pada QR Code adalah suatu kebutuhan. Logo pada QR Code akan menegaskan identitas yang pasti bahwa QR Code tersebut dan informasi di dalamnya merupakan bagian dari perusahaan dengan logo diatasnya.

Logo pada QR Code biasanya akan ditempatkan pada wilayah gray area. Wilayah tersebut merupakan wilayah abu-abu pada QR Code yang memiliki titik-titik kotak hiitam dengan kandungan respresentasi informasi data yang sangat sedikit. Wilayah gray area biasa terletak dan tersebar pada bagian tengah QR Code itu sendiri. Jika wilayah tersebut ditindih dengan konten logo, maka saat proses pemindaian (scanning) tidak akan menyusutkan informasi data yang terkandung di dalamnya dan akan menghasilkan hasil data (decoding data) yang utuh.

Menyisipkan Logo Pada QR Code

Artikel ini merupakan artikel lanjutan dari artikel sebelumnya tentang pembuatan QR Code melalui PHP. Saya masih menggunakan library php-qrcode, namun library tersebut sudah dimodifikasi dengan menyertakan parameter logo di dalamnya, termasuk merubah warna QR Code baik foreground dan background-nya. Anda tidak perlu bersusah payah membuat kode script sendiri secara manual, namun cukup dengan menyertakan parameter logo di dalamnya, dan library tersebut akan memprosesnya. Silahkan disini, untuk mendapatkan library php-qrcode yang sudah dimodifikasi.

Parameter Library php-qrcode

Library QR Code membutuhkan beberapa parameter dalam melakukan proses generate QR Code. Library QR Code disusun melalui metode OOP (Object Oriented Programming). Untuk membuat QR Code, caranya cukup dengan memanggil library tersebut dengan disertai parameter yang harus atau tidak harus dilewatkan. Parameter pada library php-qrcode meliputi :

QRcode::png("Qr_content", "the_filename.png", "H", 6, 4, 0, "0,0,0","255,255,255","the_logo.png");

Parameter ke-1 adalah konten dari Qr Code. Parameter ke-2 adalah nama file yang akan disimpan (lengkap dengan direktorinya). Parameter ke-3 adalah Error Correction Level ("H" / high). Paramater ke-4 adalah lebar pixel (6). Parameter ke-5 adalah margin (4). Parameter ke-6 adalah saveandprint (0/false). Parameter ke-6 adalah forecolor dalam format warna RGB ("0,0,0"). Parameter ke-7 adalah backcolor dalam format RGB ("255,255,255"). Parameter ke-8 adalah nama logo lengkap dengan direktorinya.

Silahkan baca pada Cara Mudah Membuat QR Code Generator Dengan PHP untuk memahami parameter Error Correction Level.

File index.php berisi komponen elemen HTML untuk memasukkan konten QR Code, beserta logo (jika disertakan) dan juga warna dari QR Code itu sendiri. Berikut file index.php :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Membuat Logo Pada QR Code Dengan PHP</title>
6.     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
7.     <link href="style.css" rel="stylesheet">
8.     <script src="jquery-1.10.2.min.js"></script>
9.  </head>
10. <body>
11.    <h3>Membuat Logo Pada QR Code Dengan PHP</h3>
12.    <div>
13.    <form method="post" action="generate_qrcode.php">
14.    <fieldset>
15.    <p>
16.    <label for="qr_code_data">Masukkan Konten Data QRcode</label>
17.    <input type="text" name="qr_code_data" id="qr_code_data" minlength="4" required>
18.    </p>
19.    <p>
20.    <label>Include logo ?</label> <input type="radio" name="logo" value="yes"/> Ya <input type="radio" name="logo" value="no" checked/> Tidak
21.    </p>
22.    <p>
23.    <label for="fore_color">Fore Color</label>
24.    <span>RGB : </span> <input type="text" name="fore_color" id="fore_color" value="0,0,0"> <span class="display_fore_color">  </span>
25.    <div class="color_container">
26.    <p class="span_forecolor" data-color="0,0,0" style="background-color:rgb(0,0,0);"></p>
27.    <p class="span_forecolor" data-color="255,0,0" style="background-color:rgb(255,0,0);"></p>
28.    <p class="span_forecolor" data-color="91,0,0" style="background-color:rgb(91,0,0);"></p>
29.    <p class="span_forecolor" data-color="0,255,0" style="background-color:rgb(0,255,0);"></p>
30.    <p class="span_forecolor" data-color="0,113,0" style="background-color:rgb(0,113,0);"></p>
31.    <p class="span_forecolor" data-color="0,0,255" style="background-color:rgb(0,0,255);"></p>
32.    <p class="span_forecolor" data-color="0,0,91" style="background-color:rgb(0,0,91);"></p>
33.    <p class="span_forecolor" data-color="255,255,0" style="background-color:rgb(255,255,0);"></p>
34.    <p class="span_forecolor" data-color="133,133,0" style="background-color:rgb(133,133,0);"></p>
35.    <p class="span_forecolor" data-color="133,133,133" style="background-color:rgb(133,133,133);"></p>
36.    <p class="span_forecolor" data-color="0,255,255" style="background-color:rgb(0,255,255);"></p>
37.    <p class="span_forecolor" data-color="0,133,133" style="background-color:rgb(0,133,133);"></p>
38.    <p class="span_forecolor" data-color="255,0,255" style="background-color:rgb(255,0,255);"></p>
39.    <p class="span_forecolor" data-color="133,0,133" style="background-color:rgb(133,0,133);"></p>
40.    </div>
41.    </p>
42.    <p>
43.    <label for="back_color">Back Color</label>
44.    <span>RGB : </span> <input type="text" name="back_color" id="back_color" value="255,255,255"> <span class="display_back_color">  </span>
45.    <div class="color_container">
46.    <p class="span_backcolor" data-color="255,255,255" style="background-color:rgb(255,255,255);"></p>
47.    <p class="span_backcolor" data-color="255,0,0" style="background-color:rgb(255,0,0);"></p>
48.    <p class="span_backcolor" data-color="91,0,0" style="background-color:rgb(91,0,0);"></p>
49.    <p class="span_backcolor" data-color="0,255,0" style="background-color:rgb(0,255,0);"></p>
50.    <p class="span_backcolor" data-color="0,113,0" style="background-color:rgb(0,113,0);"></p>
51.    <p class="span_backcolor" data-color="0,0,255" style="background-color:rgb(0,0,255);"></p>
52.    <p class="span_backcolor" data-color="0,0,91" style="background-color:rgb(0,0,91);"></p>
53.    <p class="span_backcolor" data-color="255,255,0" style="background-color:rgb(255,255,0);"></p>
54.    <p class="span_backcolor" data-color="133,133,0" style="background-color:rgb(133,133,0);"></p>
55.    <p class="span_backcolor" data-color="133,133,133" style="background-color:rgb(133,133,133);"></p>
56.    <p class="span_backcolor" data-color="0,255,255" style="background-color:rgb(0,255,255);"></p>
57.    <p class="span_backcolor" data-color="0,133,133" style="background-color:rgb(0,133,133);"></p>
58.    <p class="span_backcolor" data-color="255,0,255" style="background-color:rgb(255,0,255);"></p>
59.    <p class="span_backcolor" data-color="133,0,133" style="background-color:rgb(133,0,133);"></p>
60.    </div>
61.    </p>
62.    <p>
63.    <input type="submit" name="generate" id="btn_submit" value="Generate QRCode With Logo">
64.    </p>
65.    </fieldset>
66.    </form>
67.    </div>
68.    <script>
69. $(document).ready(function(){
70.    $("#fore_color").change(function(){
71.      var theColor = $(this).val();
72.      $(".display_fore_color").css("background","rgb(" +theColor+ ")");
73.    });
74.    $("#back_color").change(function(){
75.      var theColor = $(this).val();
76.      $(".display_back_color").css("background","rgb(" +theColor+ ")");
77.    });
78.    $(".span_forecolor").click(function(){
79.      var theColor = $(this).attr('data-color');
80.      $("#fore_color").val(theColor);
81.      $(".display_fore_color").css("background","rgb(" +theColor+ ")");
82.    });
83.    $(".span_backcolor").click(function(){
84.      var theColor = $(this).attr('data-color');
85.      $("#back_color").val(theColor);
86.      $(".display_back_color").css("background","rgb(" +theColor+ ")");
87.    });
88. });
89. </script>
90. </body>
91. </html>

Penataan elemen tag HTML menggunakan CSS file (style.css) :

CSS

1.  *,#btn_submit,a:link{
2.     font-family: 'Roboto', sans-serif;
3.  }
4.  .color_container{
5.     display:flex;
6.     margin:-15px 0;
7.     padding:0;
8.  }
9.  .display_fore_color{
10.    display:inline-block;
11.    background-color:#000;
12.    width:20px;
13.    height:20px;
14.    border:solid 1px #aaa;
15.    border-radius:2px;   
16. }
17. .display_back_color{
18.    display:inline-block;
19.    background-color:#fff;
20.    width:20px;
21.    height:20px;
22.    border:solid 1px #aaa;
23.    border-radius:2px;
24. }
25. .span_forecolor,.span_backcolor{
26.    margin-right:5px;
27.    background-color:blue;
28.    width:22px;
29.    height:22px;
30.    border:solid 1px #aaa;
31.    border-radius:2px;
32. }
33. .span_forecolor:hover,.span_backcolor:hover{
34.    cursor:pointer;
35.    border:solid 1px #444;
36.    
37. }
38. fieldset label {
39.    display:block;
40.    margin: 5px 0px;
41. }
42. #qr_code_data
43. {
44.    width: 330px;
45.    height: 33px;
46.    border: 1px solid #ddd;
47.    margin: 5px 0px;
48.    padding: 0px 5px;
49. }
50. 
51. #btn_submit{
52.    display: inline;
53.    margin: 10px 0px;
54.    background-color: #91091e;
55.    color: white;
56.    border-radius:3px;
57.    opacity: 0.8;
58.    padding: 10px 40px;
59.    border: none;
60.    outline: none;
61.    cursor: pointer;
62. }
63. 
64. #btn_submit:hover{
65.    opacity: 1;
66. }

File generate_qrcode.php untuk proses pembuatan QR Code :

PHP

1.   <?php
2.  if (isset($_POST['generate'])){
3.     include "qr_code/qrlib.php";
4.     /*create folder*/
5.     $tempdir="img-qrcode/";
6.     if (!file_exists($tempdir))
7.     mkdir($tempdir, 0755);
8.     $file_name=date("Ymd").rand().".png";
9.     $file_path = $tempdir.$file_name;
10.    
11.    /*get color */
12.    $forecolor = $_POST['fore_color'];
13.    $backcolor = $_POST['back_color'];
14.    
15.    $logo_input = $_POST['logo'];
16.    if($logo_input=="yes"){
17.      $logo = "images/logo_32x32.png";
18.    }else if($logo_input=="no"){
19.      $logo = "";
20.    }
21.    
22.    QRcode::png($_POST['qr_code_data'], $file_path, "H", 6, 4, 0, $forecolor, $backcolor, $logo);
23.    /* param (1)qrcontent,(2)filename,(3)errorcorrectionlevel,(4)pixelwidth,(5)margin,(6)saveandprint,(7)forecolor,(8)backcolor */
24.    
25.    echo "<p class='result'>Result :</p>";
26.    echo "<p><img src='".$tempdir.$file_name."' style='width:160px;height:auto;'/></p>";
27. }else{
28.    echo "something was wrong";
29. }
30. ?>

Penjelasan :
Pada file index.php, Tag HTML <form> diciptakan sebagai tempat input data QR Code. Tag <form> yang sudah diisi oleh pengguna nantinya akan dikirimkan menuju file generate_qrcode.php dengan metoda post. Input type text dengan nama qr_code_data, digunakan sebagai tempat konten QR Code. Input type radio dengan nama logo (dua buah) digunakan sebagai opsi untuk menyertakan logo. Jika pengguna melakukan cheklist pada radio yang pertama, maka nilainya "yes". Jika pada radio ke-dua, maka nilainya "no". Nilai tersebut nantinya digunakan pada halaman pemroses yang mana jika nilainya "yes", maka akan mengenerate QR Code dengan logo. Dan jika nilainya "no", maka logo tidak akan disertakan

Baris selanjutnya merupakan pilihan warna untuk QR Code. Warna standar adalah warna hitam untuk forecolor RGB (0,0,0) dan putih untuk backcolor RGB (255,255,255).

Baris ke-69 s.d 86, merupakan script dari Jquery untuk melakukan modifikasi warna QR Code secara langsung via client. Kode script ini akan merubah nilai (value) dari input type text dengan id fore_color dan id back_color.

Pada file pemroses QR Code (generate_qrcode.php), penyertaan library php-qrcode dilakukan dengan fungsi include(). Kemudian nama file diciptakan dan diletakkan pada folder img-qrcode. Pada bagian logo, anda perlu membuat folder images terlebih dahulu dan meletakkan logo di dalamnya. Jika tidak, maka logo tidak akan diproses oleh library.

Pada baris ke-22, perintah QRcode::png(param1,param2,dst) digunakan untuk memanggil library php-qrcode. Library ini akan melakukan generate QR Code secara langsung sesuai dengan parameter yang sudah diberikan. Kemudian baris selanjutnya digunakan untuk menampilkan hasil QR Code kepada pengguna pada halaman browser mereka.

Saat pengguna mengakses halaman index.php :

menyisipkan logo pada qr code

Saat pengguna sudah melakukan klik pada tombol Generate QR Code With Logo dan QR Code berhasil diciptakan (perhatikan logo di atasnya):

menyisipkan logo pada qr code

Berikut contoh hasil QR Code dengan logo di atasnya yang berhasil dibuat jika dilihat pada File Explorer :

file explore menyisipkan logo pada qr code

Demikian artikel tentang bagaimana cara menyisipkan dan membuat logo di atas QR Code melalui program PHP, semoga bermanfaat . Silahkan di sini untuk mendapatkan source code-nya. Source Code terdiri atas library php-qrcode modifikasi, dan juga file pendukung.

   0   82

Kategori : tag iconhtml - tag iconcss - tag iconjquery - tag iconphp - tag icontech

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

Formulir ini hanya bagi member yang sudah terdaftar. disini.

Belum terdaftar? silahkan Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 

Silahkan login terlebih dahulu untuk mengirimkan polling. disini.

Belum terdaftar? silahkan Daftar disini.


Visitor Live Chat

admin(04 Mar 2021 at 10:52 am)

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

_Dicky (06 Mar 2021 at 03:24 pm)

Said : Oops, It's nice content

billy_123 (06 Mar 2021 at 03:26 pm)

Said : Anyone, can you explain about HTMl.. what is it???

_Dicky (06 Mar 2021 at 03:27 pm)

Said : HTML is abbreviation ..

_Dicky (06 Mar 2021 at 03:28 pm)

Said : It's Stand for Hyper text mark up language..

billy_123 (06 Mar 2021 at 03:28 pm)

Said : It's so clear right now..

billy_123 (06 Mar 2021 at 03:29 pm)

Said : and what about CSS

_Dicky (06 Mar 2021 at 03:29 pm)

Said : css for styling sheet guys..

rizky yuda (07 Mar 2021 at 12:30 pm)

Said : Konten cukup menambah wawasan...

suryadi (13 Mar 2021 at 06:46 pm)

Said : Boleh request artikel cara koneksi database msyql ke php..

Monserrat Kilba (06 Apr 2021 at 04:18 am)

Said : index

Nettie Rutherfo (08 Apr 2021 at 12:30 pm)

Said : Auto

Visitor Name
Email

I'm not a robot