Tutorial Program GUI Encode dan Decode QR Code dengan Bahasa C#

Tutorial QR Code Bahasa C#
Tutorial QR Code Bahasa C#
Tutorial Program GUI Encode dan Decode QR Code dengan Bahasa C# - Setelah sebelumnya saya menulis tentang tutorial Membuat SideNav Dan Animasi CSS Dengan JavaScript pada artikel kali ini kita akan belajar Bahasa Pemrograman basis Desktop Yaitu C#.

Bahasa C# Merupakan bahasa yang belum pernah ada pada blog ini, jadi saya rasa saya perlu menambahkannya agar dapat memperkaya konten yang ada di blog ini dan agar Otak Keren menjadi blog Teknologi untuk seluruh lapisan Programmer dan penggiat IT lainnya.

Dalam Pemrograman Desktop bahasa yang biasanya di gunakan adalah Visual Basic (VB),Java,C++,dan C# (Mungkin ada lagi yang lain saya belum tau) . Tiga bahasa itu biasanya paling mudah untuk membuat Aplikasi Desktop karena sudah ada IDE nya yaitu Visual Studio Microsoft Visual Basic dan lain lain.

TUTORIAL PROGRAM QR CODE MENGGUNAKAN C#

Baik langsung saja kita mulai bagaimana cara membuat aplikasi QRCode dengan C# , tetapi sebelumya anda sudah harus mempunyai Microsoft Visual Studio minimal versi 2010, oke langsung saja kita mulai tutorialnya.

1. Pertama : buka Visual Studio anda lalu klik File -> New -> Project 
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010
2. Kedua : Setelah  itu silahkan pilih Windows Form Application lalu namai project tersebut dengan keinginan anda...
Project C#
Project C#
3. Ketiga : Klik "OK". Setelah itu akan ada Form Windows kosong yang akan menjadi tempat untuk Aplikasi Desktop kita. Silahkan tambahkan pictureBox dengan cara Klik Toolbox -> picturebox -> Klik yang lama lalu arahkan ke Form Kosong tadi
Form Project C#
Form Project C#

PictureBox Visual Studio 2010
PictureBox Visual Studio 2010

PictureBox Visual Studio 2010
PictureBox Visual Studio 2010
4. Keempat : Silahkan tambahkan textbox dan button dengan cara yang tertera pada gambar dibawah ini. Silahkan kalian dan pahami caranya.
TextBox Visual Studio 2010
TextBox Visual Studio 2010

TextBox Visual Studio 2010
TextBox Visual Studio 2010
5. Kelima : Setelah menambahkan textbox selanjutnya kita akan menambahkan button untuk Encode dan Decode QRCode nya silahkan tambahkan button dengan cara Toolbox -> Button -> Seret (Drag and Drop).

Tambahkan button 2 kali yaitu tombol pertama untuk Encode dan tombol Kedua untuk Decode. Jika anda ingin merubah text pada button tersebut caranya klik pada tombol yang ingin di ubah text nya lalu di samping kanan klik "Properties" -> Text -> Ubah teks sesuka anda  ulangi cara cara tersebut untuk menambahkan button atau yang lainnya..
Text Button C#
Text Button C#
6. Keenam : Setelah itu Klik "FORM" lalu klik Class View  yang ada di samping kanan lalu klik "Manage NuGet Package" lalu klik "Browse" dan cari "messaging toolkit" tanpa tanda kutip. Jika sudah kalian temukan silahkan klik package nya lalu klik "Install"
NuGet Package C#
NuGet Package C#

MessageToolkit C#
MessageToolkit C#

MEMASUKKAN CODE C# UNTUK ENCODE QRCODE

Jika keenam langkah diatas sudah kalian lakukan, lanjut dengan mengklik Class View lagi kemudian klik Rebuild. Lalu kembali ke Form1.cs[Design] silahkan klik dua kali pada Form Tersebut sampai menampilkan Kode C# nya.
Baca Juga: Membuat Chatbot AI Bersuara Seperti Jarvis dengan C++
Untuk membuat Function Encode Decode QRCode nya silahkan tulis Assembly Reference ini


Jika kalian kurang jelas melihat code diatas, berikut adalah codenya secara tertulis

using MessagingToolkit.QRCode.Codec.Data;
using System.IO;
using System.Drawing.Imaging;


Nah pada kode diatas kita menambahkan semacam fungsi untuk mengolah QR Code dari MessageToolkit. Kemudian kita gunakan juga System.IO untuk input dan output data. Kemudian System.Drawing.Imaging untuk menampilakan dan membaca gambar QR kita nantinya.

Jika sudah balik ke Form1.cs[Design] silahkan klik dua kali pada button1 (Encode) Lalu masukan kode pada gambar di bawah ini di dalam kode button1 tersebut

Tempat Memasukkan Code C#
Code Encode QRCode C#
Tambahkan kode tersebut dari tulisan "try" sampai kurung kurawal yang sudah di tandai. Berikut adalah code tertulis yang harus kalian masukkan pada program QR code kalian.

try
{
  using (SaveFileDialog sf = new SaveFileDialog() {filter = "JPEG|".jpeg"} )
  {
    if (sf.ShowDialog() == DialogResult.OK)
    {
      MessagingToolkit.QRCode.CodecQRCodecEncoder encode = new MessagingToolkit.QRCode.Codec.QRCodeEncoder();
      encode.QRCodeScale = 6;
      Bitmap bmp = encode.Encode(textBox1.Text);
      pictureBox1.Image = bmp;
      bmp.Save(sf.FileName, ImageFormat.Jpeg);
    }
  }
}
catch(Exception ex)
{
  MessageBox.Show(ex.Message);
}


Jika sudah mari kita buat function Decode nya ulangi langkah langkah di atas dengan cara ke Form1.cs[Design] klik dua kali pada button2 lalu masukan kode pada gambar  di bawah ini.

Berikut adalah penjelasan dari code yang semoga kalian tulis dan gak copy paste aja diatas : 

1 : try-catch : Berfungsi untuk menangkap kesalahan atau error pada function program yang di tulis di dalamnya dan akan menampilkan pesan error lewat MessagBox.Show(ex.Message);

2 : using(SaveFileDialog) : Digunakan untuk membuka Pop-Up File untuk menyimpan hasil Encode dari text yang sudah anda masukan.

3 : MessagingToolkit.QRCode.Codec.QRCodeEncoder encode : Untuk mendeklarasikan Variabel MessagingToolkit agar function nya dapat bekerja.

4 : encode.QRCodeScale : Merupakan scale dari QRCode.

5 : Bitmap bmp = encode.Encode(textBox1.Text) : Mengambila teks dari textbox1 lalu meng-Encode nya menjadi gambar QRCode

6 : pictureBox1.Image = bmp : Memberikan gambar ke pictureBox1 dari Bitmap

7 : bmp.Save(sf.FileName,ImageFormat.Jpeg) : Menyimpan File Gambar QRCode tersebut dengan nama yang sudah di tentukan oleh anda , dan File tersebut bereksistensikan .Jpeg.

Setelah kalian menanamkan code untuk encode diatas pada program kalian, sekarang kita akan memasukkan code untuk proses menerjemahkan QRCode atau code untuk decode.

Silahkan kalian klik tab form1.cs kemudian cari button2 (Decode) kemudian klik dua kali hingga muncul kode C# nya. berikut code yang harus kalian masukkan dan penempatannya.

Code Decode QRCode C#
Code Decode QRCode C#
Berikut adalah code yang tertulis jika kalian kesusahan melihat code diatas.

try
{
  using (OpenFileDialog open = new OpenFileDialog() {filter = "JPEG|".jpeg"} )
  {
    if (sf.ShowDialog() == DialogResult.OK)
    {
      pictureBox1.Image = Image.FromFile(open.FileName);
      MessagingToolkit.QRCode.CodecQRCodecDecoder decode = new MessagingToolkit.QRCode.Codec.QRCodeDecoder();
      textBox2.Text = decode.Decode(new QRCodeBitmapImage(pictureBox1.Image as Bitmap));
    }
  }
}
catch(Exception es)
{
  MessageBox.Show(es.Message);
}


Nah untuk penjelasan setiap baris codenya adalah sebagi berikut :

1 : try - catch : untuk mencari kesalahan pada function program nya dan jika benar ada yang salah maka kesalahan program dapat di tampilkan lewat MessageBox.Show(e.Message) yang akan memberikan pesan.

2 : using(OpenFileDialog) : Membuka Pop-Up dialog untuk memilih File gambar yang ada di dalam komputer lalu kita memfilter nya dengan .jpeg itu artinya hanya file yang memiliki eksistensi .jpeg lah yang boleh di insert.

3 : pictureBox1.Image = Image.FromFile : Berfungsi untuk menambahkan gambar yang di ambil dari Insert pilihan tadi ke pictureBox1.

4 : Decode(new QRCodeBitmapImage(pictureBox1.Image as Bitmap)) : Adalah suatu function untuk men-Decode file dari pictureBox1 yang sudah di tambahkan tadi.
Baca Juga: Membuat GUI Chatbot AI Menggunakan Python
Jika anda sudah mengikuti tutorial di atas tadi silahkan Run program nya dengan cara klik Start atau Tekan Tombol F5.

HASIL PROGRAM GUI QRCODE BAHASA C#

Jika sudah menyelesaikan quest daitas, silahkan test program tersebut dengan cara masukan teks pada textbox pertama lalu klik tombol pertama dan save file gambar QRCode tersebut dengan nama yang anda inginkan setelah itu anda akan melihat hasilnya di picturebox.
GUI QRCode Encoder Mode
GUI QRCode Encoder Mode
Jika anda ingin men-Decode File QRCode tersebut silahkan klik tombol kedua lalu pilih file Gambar QRCode tersebut dan pilihlah file Gambar QRCode tersebut bereksistensi .jpeg jika sudah nanti anda akan melihat hasilnya pada textbox yang kedua.
GUI QRCode Decoder Mode
GUI QRCode Decoder Mode

PENUTUP TUTORIAL C#

Itulah sedikit kemudahan yang disediakan MessageToolkit untu kita membuat program untuk membuat sekaligus menerjemahkan kode QR. Nah..untuk Tutorial Program GUI Encode dan Decode QR Code dengan Bahasa C# sekarang mungkin cukup sampai di sini.

Kedepannya nanti saya akan membuat konten bertemakan Bahasa Pemrograman C# dan Sedikit Web Programming. Jangan lupa share dan silahkan komen jika ada kode yang kalian rasa kurang dimengerti.

Share this

Related Posts

Previous
Prev Post »

Visitor baik, selalu tinggalkan jejak.
Silahkan komen yang relevan & tidak berlebihan, tidak berbau SARA & Pornografi, tidak mengandung promosi.
^ _ ^ Happy Blogging !