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

Merubah Tampilan Warna QR Code Dengan PHP

previous Previous Page

Qr Code merupakan kepanjangan dari Quick Response Code yang pertama kali ditemukan oleh perusahaan otomotive Jepang (Denso Wave). QR Code berfungsi untuk menampung berbagai data dengan lebih dari 2000 character muat di dalamnya untuk berbagai keperluan. Seperti halnya barcode, QR Code dapat dipindai (discan) oleh mesin (kamera) QR Code Reader yang hasilnya berupa kumpulan informasi data. Data tersebut nantinya dapat diolah dan dihubungkan dengan sistem lainnya sesuai dengan isi dan kegunaan informasi datanya. Misalnya jika datanya dalam bentuk URL maka QR Reader akan menampilkan URL tersebut dan siap diarahkan menuju website dari URL tersebut. Atau jika datanya merupakan data informasi wifi, maka QR Reader akan menampilkan nama perangkat wifi lengkap dengan passwordnya dan selanjutnya siap dihubungkan dengan piranti wifi tersebut.

QR Code terdiri atas kotak - kotak berwarna hitam yang disusun dalam bentuk grid dengan latar berwarna putih. Tampilan kotak dengan warna hitam dengan latar belakang warna putih adalah warna standar QR Code yang biasa digunakan oleh banyak kalangan. Namun warna tersebut dapat dirubah sesuai dengan tema dan keperluan suatu produk. Dengan merubah warna QR Code tentu saja akan membuat tampilan QR Code tersebut jauh lebih menarik untuk dilihat.

Merubah Tampilan Warna QR Code Dengan PHP

Untuk membuat QR Code, saya masih menggunakan library php-qrcode. Namun library tersebut sudah dimodifikasi dengan menyertakan parameter forecolor dan backcolor untuk keperluan pewarnaan QR Code. Silahkan anda di sini, untuk mendapatkan library php-qrcode yang sudah dimodifikasi.

Parameter Library php-qrcode modification

Library php-qrcode diciptakan dengan sistem OOP (Object Oriented Programming). Proses pembuatan QR Code dilakukan dengan memanggil Class dari library tersebut. Pada library php-qrcode modification terdapat penambahan parameter yang harus disertakan. Parameter tersebut adalah forecolor dan backcolor. Pemanggilan Class library menggunakan :

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

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").

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

Untuk keperluan penataan tampilan halaman index, saya menggunakan library Jquery. Font berupa qrcode-font juga perlu disertakan sebagai display hasil Qr Code. Font tersebut bersifat sebagai display, bukan QR Code sebenarnya, jadi jika dilakukan scanning tentu saja tidak akan menghasilkan apa-apa.

Berikut file index.php yang digunakan sebagai input untuk memasukkan konten QR Code :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Merubah Tampilan Warna QR Code Pada 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>Merubah Tampilan Warna QR Code Pada 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 for="fore_color">Fore Color</label>
21.    <span>RGB : </span> <input type="text" name="fore_color" id="fore_color" value="0,0,0"> <span class="display_fore_color">  </span>
22.    <div class="color_container">
23.    <p class="span_forecolor" data-color="0,0,0" style="background-color:rgb(0,0,0);"></p>
24.    <p class="span_forecolor" data-color="255,0,0" style="background-color:rgb(255,0,0);"></p>
25.    <p class="span_forecolor" data-color="91,0,0" style="background-color:rgb(91,0,0);"></p>
26.    <p class="span_forecolor" data-color="0,255,0" style="background-color:rgb(0,255,0);"></p>
27.    <p class="span_forecolor" data-color="0,113,0" style="background-color:rgb(0,113,0);"></p>
28.    <p class="span_forecolor" data-color="0,0,255" style="background-color:rgb(0,0,255);"></p>
29.    <p class="span_forecolor" data-color="0,0,91" style="background-color:rgb(0,0,91);"></p>
30.    <p class="span_forecolor" data-color="255,255,0" style="background-color:rgb(255,255,0);"></p>
31.    <p class="span_forecolor" data-color="133,133,0" style="background-color:rgb(133,133,0);"></p>
32.    <p class="span_forecolor" data-color="133,133,133" style="background-color:rgb(133,133,133);"></p>
33.    <p class="span_forecolor" data-color="0,255,255" style="background-color:rgb(0,255,255);"></p>
34.    <p class="span_forecolor" data-color="0,133,133" style="background-color:rgb(0,133,133);"></p>
35.    <p class="span_forecolor" data-color="255,0,255" style="background-color:rgb(255,0,255);"></p>
36.    <p class="span_forecolor" data-color="133,0,133" style="background-color:rgb(133,0,133);"></p>
37.    </div>
38.    </p>
39.    <p>
40.    <label for="back_color">Back Color</label>
41.    <span>RGB : </span> <input type="text" name="back_color" id="back_color" value="255,255,255"> <span class="display_back_color">  </span>
42.    <div class="color_container">
43.    <p class="span_backcolor" data-color="255,255,255" style="background-color:rgb(255,255,255);"></p>
44.    <p class="span_backcolor" data-color="255,0,0" style="background-color:rgb(255,0,0);"></p>
45.    <p class="span_backcolor" data-color="91,0,0" style="background-color:rgb(91,0,0);"></p>
46.    <p class="span_backcolor" data-color="0,255,0" style="background-color:rgb(0,255,0);"></p>
47.    <p class="span_backcolor" data-color="0,113,0" style="background-color:rgb(0,113,0);"></p>
48.    <p class="span_backcolor" data-color="0,0,255" style="background-color:rgb(0,0,255);"></p>
49.    <p class="span_backcolor" data-color="0,0,91" style="background-color:rgb(0,0,91);"></p>
50.    <p class="span_backcolor" data-color="255,255,0" style="background-color:rgb(255,255,0);"></p>
51.    <p class="span_backcolor" data-color="133,133,0" style="background-color:rgb(133,133,0);"></p>
52.    <p class="span_backcolor" data-color="133,133,133" style="background-color:rgb(133,133,133);"></p>
53.    <p class="span_backcolor" data-color="0,255,255" style="background-color:rgb(0,255,255);"></p>
54.    <p class="span_backcolor" data-color="0,133,133" style="background-color:rgb(0,133,133);"></p>
55.    <p class="span_backcolor" data-color="255,0,255" style="background-color:rgb(255,0,255);"></p>
56.    <p class="span_backcolor" data-color="133,0,133" style="background-color:rgb(133,0,133);"></p>
57.    </div>
58.    </p>
59.    <p>
60.    Sample QR Code
61.    </p>
62.    <p>
63.    <span class="sample_qrcode">2</span>
64.    </p>
65.    <p>
66.    <input type="submit" name="generate" id="btn_submit" value="Generate QRCode">
67.    </p>
68.    </fieldset>
69.    </form>
70.    </div>
71.    <script>
72. $(document).ready(function(){
73.    $("#fore_color").change(function(){
74.      var theColor = $(this).val();
75.      $(".display_fore_color").css("background","rgb(" +theColor+ ")");
76.      $(".sample_qrcode").css("color","rgb(" +theColor+ ")");
77.    });
78.    $("#back_color").change(function(){
79.      var theColor = $(this).val();
80.      $(".display_back_color").css("background","rgb(" +theColor+ ")");
81.      $(".sample_qrcode").css("background","rgb(" +theColor+ ")");
82.    });
83.    $(".span_forecolor").click(function(){
84.      var theColor = $(this).attr('data-color');
85.      $("#fore_color").val(theColor);
86.      $(".display_fore_color").css("background","rgb(" +theColor+ ")");
87.      $(".sample_qrcode").css("color","rgb(" +theColor+ ")");
88.    });
89.    $(".span_backcolor").click(function(){
90.      var theColor = $(this).attr('data-color');
91.      $("#back_color").val(theColor);
92.      $(".display_back_color").css("background","rgb(" +theColor+ ")");
93.      $(".sample_qrcode").css("background","rgb(" +theColor+ ")");
94.    });
95. });
96. </script>
97. 
98. </body>
99. </html>

Penataan elemen HTML nya menggunakan style.css :

CSS

1.  @font-face {
2.     font-family: 'QR-font';
3.     src: url('fonts/QR font tfb.ttf');
4.     font-weight: normal;
5.     font-style: normal;
6.     }
7.  *,#btn_submit,a:link{
8.     font-family: 'Roboto', sans-serif;
9.  }
10. .sample_qrcode{
11.    font-family: QR-font;
12.    margin:0;
13.    padding-top:15px;
14.    padding-left:15px;
15.    padding-right:-20px;
16.    padding-bottom:-20px;
17.    font-size:110px;
18.    color:#000;
19.    background-color:#fff;
20. }
21. .color_container{
22.    display:flex;
23.    margin:-15px 0;
24.    padding:0;
25. }
26. .display_fore_color{
27.    display:inline-block;
28.    background-color:#000;
29.    width:20px;
30.    height:20px;
31.    border:solid 1px #aaa;
32.    border-radius:2px;   
33. }
34. .display_back_color{
35.    display:inline-block;
36.    background-color:#fff;
37.    width:20px;
38.    height:20px;
39.    border:solid 1px #aaa;
40.    border-radius:2px;
41. }
42. .span_forecolor,.span_backcolor{
43.    margin-right:5px;
44.    background-color:blue;
45.    width:22px;
46.    height:22px;
47.    border:solid 1px #aaa;
48.    border-radius:2px;
49. }
50. .span_forecolor:hover,.span_backcolor:hover{
51.    cursor:pointer;
52.    border:solid 1px #444;
53.    
54. }
55. fieldset label {
56.    display:block;
57.    margin: 5px 0px;
58. }
59. #qr_code_data
60. {
61.    width: 330px;
62.    height: 33px;
63.    border: 1px solid #ddd;
64.    margin: 5px 0px;
65.    padding: 0px 5px;
66. }
67. 
68. #btn_submit{
69.    display: inline;
70.    margin: -10px 0px;
71.    background-color: #91091e;
72.    color: white;
73.    border-radius:3px;
74.    opacity: 0.8;
75.    padding: 10px 40px;
76.    border: none;
77.    outline: none;
78.    cursor: pointer;
79. }
80. 
81. #btn_submit:hover{
82.    opacity: 1;
83. 

Bagian file pemroses QR Code-nya menggunakan generate_qrcode.php :

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.    $forecolor = $_POST['fore_color'];
11.    $backcolor = $_POST['back_color'];
12.    
13.    QRcode::png($_POST['qr_code_data'], $file_path, "H", 6, 4, 0, $forecolor, $backcolor);
14.    /* param (1)qrcontent,(2)filename,(3)errorcorrectionlevel,(4)pixelwidth,(5)margin,(6)saveandprint,(7)forecolor,(8)backcolor */
15.    
16.    echo "<p class='result'>Result :</p>";
17.    echo "<p><img src='".$tempdir.$file_name."' /></p>";
18. }else{
19.    echo "something was wrong";
20. }
21. ?>

Penjelasan :
Pada file index.php, Elemen tag <form> diciptakan dengan metoda post yang diarahkan menuju halaman generate_qrcode.php. Form tersebut berisi masukkan data QR Content pada input type text dengan nama="qr_code_data", data forecolor input type text dengan nama="fore_color", data backcolor pada input type text dengan nama="back_color". Elemen HTML lainnya berupa tag <p> yang diperuntukkan sebagai kotak pilihan warna pengguna. Saat kotak warna tersebut diklik, akan merubah warna sample QR Code begitu juga nilai dari forecolor dan backcolor. (baris ke-13 s.d 67).

Baris selanjutnya (baris ke-73 s.d 96), merupakan script Jquery yang digunakan untuk melakukan perubahan konten input data form berupa fore_color dan juga back_color. Saat pengguna melakukan klik pada kotak warna dengan class = "span_forecolor", maka nilai dari input dengan id="fore_color" akan menyesuaikan dengan nilai attribut data-color pada elemen dengan class tersebut. Sample QR Code otomatis juga akan berubah sesuai dengan warna kotak yang diklik oleh pengguna.

Pada file generate_qrcode.php, Library php-qrcode dipanggil dengan perintah penyertaan file (include). Kemudian proses menyediaan filepath yang digunakan sebagai nama dan juga alamat file image yang akan disimpan. Proses pembuatan QR Code dilakukan dengan memanggil Class "QRcode::png(param1,(param2,dts);". Hasilnya akan mendapatkan file png yang langsung ditampilkan kepada pengguna pada tag HTML <img> (baris ke-2 s.d 18).

Saat pengguna memasukkan data QR Code pada halaman index.php :

qr code with color

Saat QR Code berhasil digenerate (perhatikan pada warna QR Code) :

qr code with color

Hasil akhir berupa file img (gambar) dengan ekstensi png saat ditampilkan pada File Explorer :

file explorer qr code with color

Demikian artikel tentang cara merubah tampilan warna pada QR Code melalui PHP, semoga bermanfaat. Bagi anda yang membutuhkan source code, silahkan di sini. Materi source code berupa file zip yang terdiri atas library php-qrcode modification, dan juga file - file pendukungnya.

   0   87

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