Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • Artikel
  • »
  • Merubah Tampilan Barcode Dengan Warna Custom Pada PHP

Merubah Tampilan Barcode Dengan Warna Custom Pada PHP

previous Previous Page

Barcode atau kode bar merupakan metoda untuk menyajikan data dalam bentuk visual (gambar). Gambar barcode disajikan dalam bentuk garis garis paralel dengan ketebalan garis dan ketebalan spasi garis yang berbeda-beda. Gambar tersebut mewakili kode digit tertentu yang akan muncul saat proses scanning (pemindaian) oleh mesin barcode scanner. Penggunaan kode barcode banyak ditemukan pada produk ritel dimana pada setiap item barang yang akan dijual diberikan kode barcode. Yang mana jika kode tersebut discan, akan muncul kode barcode dan nantinya digunakan untuk melakukan pengecekan harga item tersebut melalui database.

Gambar barcode umumnya disajikan dalam bentuk garis - garis hitam paralel dengan background garis - garis spasi berwarna putih. Itu adalah bentuk standar yang umum digunakan pada penggunaan barcode. Namun, untuk keperluan tertentu penyajian gambar barcode dapat digantikan dengan gambar barcode yang mempunyai warna yang lebih menarik. Seperti warna garis - garis hitam (warna depan) digantikan dengan warna merah atau kuning ataupun yang lainnya. Begitu pula dengan warna gambar background, warna latar barcode juga dapat diubah dengan warna sesuai dengan tema yang dikehendaki.

Penggunaan warna yang berbeda dalam membuat barcode perlu dilakukan pengujian terlebih dahulu. Hal ini dimaksudkan agar saat dilakukan proses scanning oleh mesin barcode scanner, gambar barcode tersebut dapat discan dengan hasil yang baik, dan menghasilkan nilai berupa kode barcode yang utuh.

Merubah Tampilan Warna Barcode

Pada artikel kali ini, saya akan membahas tentang bagaimana cara merubah tampilan warna gambar barcode sesuai dengan warna yang kita kehendaki. Proses pembuatan barcodenya masih menggunakan library php-barcode, namun library tersebut sudah dilakukan modifikasi tertentu untuk merubah parameter warna gambar barcode berupa warna depan (forecolor) barcode dan juga warna belakang (backcolor) barcode. Silahkan di sini, untuk mendapatkan library modifikasi php-barcode.

Untuk memudahkan modifikasi tampilan sisi client, saya menggunakan library jquery. Kemudian sebagai sample gambar barcode digunakan barcode-font, dimana barcode-font ini digunakan hanya sebagai display saja.

Berikut file index.php yang digunakan sebagai tampilan utama halaman :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Merubah Tampilan Warna Barcode 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>Merubah Tampilan Warna Barcode Dengan PHP</h3>
12.    <p>
13.    <form method="post" action="generate_barcode.php">
14.    <fieldset>
15.    <p>
16.    <label for="kode_barcode">Masukkan Kode Barcode</label>
17.    <input type="text" name="kode_barcode" id="kode_barcode" minlength="4" maxlength="20" 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 Barcode
61.    </p>
62.    <p>
63.    <span class="sample_barcode">55588773345</span>
64.    </p>
65.    <p>
66.    <input type="submit" name="generate" id="btn_submit" value="Generate Code">
67.    </p>
68.    </fieldset>
69.    </form>
70.    </p>
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_barcode").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_barcode").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_barcode").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_barcode").css("background","rgb(" +theColor+ ")");
94.    });
95. });
96. </script>
97. </body>
98. </html>

Penataan elemen HTML-nya menggunakan style.css :

CSS

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

Untuk pemrosesnya menggunakan file generate_barcode.php :

PHP

1.   <?php
2.  if (isset($_POST['generate'])){
3.     /*create folder*/
4.     $tempdir="img-barcode/";
5.     if (!file_exists($tempdir))
6.     mkdir($tempdir, 0755);
7.     $target_path=$tempdir . $_POST['kode_barcode'] . ".png";
8.  
9.     /*using server online
10.    $protocol=stripos($_SERVER['SERVER_PROTOCOL'], 'https') === 0 ? 'https://' : 'http://';
11.    $fileImage=$protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/barcode.php?text=".$_POST['kode_barcode']."&fore_color=".$_POST['fore_color']."&back_color=". $_POST['back_color']."&codetype=code128&print=true&size=55";
12.    */
13.    /*using server localhost*/
14.    $fileImage="http://localhost".dirname($_SERVER['PHP_SELF']) . "/barcode.php?text=".$_POST['kode_barcode']."&fore_color=".$_POST['fore_color']."&back_color=". $_POST['back_color']."&codetype=code128&print=true&size=55";
15. 
16.    /*get content from url*/
17.    $content=file_get_contents($fileImage);
18. 
19.    /*save file */
20.    file_put_contents($target_path, $content);
21.    echo "<p>Result :</p>";
22.    echo "<p><img src='".$tempdir. $_POST['kode_barcode'] . ".png'/></p>";
23. }
24. ?>

Penjelasan :
Pada file index.php, HTML <form> perlu dibuat untuk mengumpulkan input data berupa kode barcode dari pengguna yang akan dikirim dengan metoda post menuju halaman generate_barcode.php (baris ke-13). Kemudian bagian selanjutnya berupa tampilan kotak warna yang mewakili warna tertentu. Kotak warna ini dapat diklik oleh pengguna untuk mendapatkan warna depan (fore_color) dan juga warna belakang (back_color) (baris ke-20 s.d 56). Saat kotak tersebut diklik perlu dibuat kode script berupa jquery yang berfungsi merubah konten inputan, dan juga merubah warna sample barcode dengan warna yang dikehendaki pengguna (baris ke-72 s.d 95)

Pada file generate_barcode.php, Proses perubah warna gambar barcode dilakukan dengan menambahkan parameter fore_color dan juga back_color ke dalam file generator (barcode.php). File tersebut akan menghasilkan gambar murni dalam versi php, dan untuk mengubahnya ke dalam bentuk file gambar (png) dilakukan dengan metode file_put_contents().

Saat pengguna memasukkan input berupa kode barcode :

warna barcode custom

Saat pengguna selesai menekan tombol Generate Barcode :

warna barcode custom

Hasil gambar barcode yang sudah berhasil disimpan : (sample → img-barcode)

warna barcode custom

Demikian artikel tentang cara merubah tampilan gambar barcode dari warna standar hitam dengan latar putih menjadi gambar barcode dengan warna custom sesuai dengan tema yang kita inginkan. Bagi anda yang ingin memiliki source code nya, silahkan di sini. Materi berupa library php-barcode, barcode-font, dan juga file-file pendukung sudah disediakan.

   0   85

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