Skip to main content

MODUL 4

Strings dan Komunikasi Serial di Visual C#​

Pemrograman Berbasis Komputer — Politeknik Negeri Batam


I. Tujuan​

Setelah menyelesaikan modul ini, mahasiswa diharapkan dapat:

  • ✅ Mempelajari penggunaan Strings di C#
  • ✅ Mengetahui kegunaan Strings dalam aplikasi
  • ✅ Menggunakan Strings dalam aplikasi windows sederhana
  • ✅ Mempelajari komunikasi serial di C#
  • ✅ Membuat aplikasi sederhana untuk menerima dan mengirim data via serial port di C#

II. Dasar Teori​

Pengertian Strings​

String adalah kumpulan karakter yang dianggap sebagai satu buah unit tersendiri. Karakter ini dapat berupa:

  • Huruf besar (A-Z)
  • Huruf kecil (a-z)
  • Angka (0-9)
  • Karakter spesial (+, &, $, #, dll)

String adalah object dari class String di namespace System. String biasanya ditulis dalam tanda petik:

"Ini adalah string!"

Deklarasi String​

Untuk inisialisasi dan deklarasi string:

string strColor = "blue";

Property Length​

Sama seperti array, string dapat mengetahui jumlah karakter dengan menggunakan property Length. Karena string sebenarnya adalah array dari karakter, kita dapat menggunakan format array untuk melihat indeks pada string.

Misalnya, untuk mengetahui huruf pertama:

string strColor = "blue";
char firstChar = strColor[0]; // 'b'
char lastChar = strColor[3]; // 'e'
int length = strColor.Length; // 4

Kegunaan Strings​

Pengolahan string erat kaitannya dengan pengolahan data pada aplikasi. Sebagai contoh, pada sebuah aplikasi:

  • Tidak bisa langsung memproses data yang ada pada textBox, terutama jika terdapat pembatasan khusus pada inputan
  • Berguna saat membuat aplikasi yang dapat berkomunikasi dengan device lain seperti mikrokontroller
  • Proses yang paling sering dilakukan adalah parsing data

Untuk melakukan parsing data, kita harus memahami method yang telah disediakan oleh .NET.

Komunikasi Serial​

Pada praktikum ini, kita juga akan mencoba komunikasi dengan mikrokontroller melalui port serial. Komunikasi serial merupakan cara yang paling umum untuk berkomunikasi antara PC dan mikrokontroller seperti Arduino.


III. Praktikum​

3.1 Percobaan 1: Pengolahan String​

Tujuan​

Mempelajari dan mengimplementasikan berbagai method pengolahan string di C#.

Method-Method String​

Berikut adalah beberapa method yang telah disediakan oleh .NET untuk mengolah string (jika diimplementasikan pada strText = "My String"):

Insert, Remove, Case Conversion​
MethodContohHasil
Insert(index, string)strText.Insert(9,"!")"My String!"
Remove(index, count)strText.Remove(2,1)"MyString"
ToLower()strText.ToLower()"my string"
ToUpper()strText.ToUpper()"MY STRING"
IndexOf dan LastIndexOf​

Untuk mencari posisi indeks suatu string di dalam string yang lebih panjang, gunakan method IndexOf.

Misalnya pada str = "My string is a long string":

MethodContohHasil
IndexOf(string)str.IndexOf("ring")5
IndexOf(string, int)str.IndexOf("ring",10)22
LastIndexOf(string)str.LastIndexOf("ring")22
LastIndexOf(string, int)str.LastIndexOf("ring",3)-1
Substring​

Untuk meng-copy karakter atau kata atau kalimat dalam sebuah string yang panjang, gunakan method Substring. String yang kita cari dalam string yang panjang disebut substring (bagian dari string).

hasil = str.Substring(indeks_awal, jumlah_karakter);

Contoh:

string str = "My string is a long string";
string hasil = str.Substring(0, 2); // "My"
string hasil2 = str.Substring(3, 6); // "string"
Replace​

Untuk mengganti kemunculan kata dalam suatu string:

str.Replace("euro", "rupiah");
Method Lain​

Beberapa method lain yang berguna (diaplikasikan pada str = "My String"):

MethodContohHasil
Joinstring[] x = {"a","b"}; String.Join("-",x)"a-b"
Splitstring[] z = str.Split()Array ["My", "String"]
Trimstr.Trim()"My String"

Langkah-Langkah Praktikum​

Langkah 1: Buka Visual C# dan buat project baru

  1. Buka Visual Studio 2022
  2. Pilih Create New Project
  3. Pilih Windows Forms App (.NET Framework)
  4. Berikan nama project pada project tersebut

Langkah 2: Design Form

Gunakan textBox dan button, kemudian design tampilan sesuai gambar berikut:

alt text

Langkah 3: Aktifkan event click untuk masing-masing button

Double-click pada setiap button untuk membuat event click handler.

Langkah 4: Tambahkan program untuk masing-masing event click button

Button 1 - IndexOf​
private void button1_Click(object sender, EventArgs e)
{
textBox3.Text = textBox1.Text.IndexOf(textBox2.Text).ToString();
}

Penjelasan: Mencari posisi pertama dari string yang ada di textBox2 dalam string yang ada di textBox1, hasilnya ditampilkan di textBox3.

Button 2 - LastIndexOf​
private void button2_Click(object sender, EventArgs e)
{
textBox5.Text = textBox1.Text.LastIndexOf(textBox4.Text).ToString();
}

Penjelasan: Mencari posisi terakhir dari string yang ada di textBox4 dalam string yang ada di textBox1, hasilnya ditampilkan di textBox5.

Button 3 - Substring​
private void button3_Click(object sender, EventArgs e)
{
try
{
textBox8.Text = textBox1.Text.Substring(
Convert.ToInt16(textBox6.Text),
Convert.ToInt16(textBox7.Text)
);
}
catch
{
MessageBox.Show("Inputan harus dalam angka (0-9)", "Error",
MessageBoxButtons.OK, MessageBoxIcon.Warning);
}
}

Penjelasan: Mengambil bagian dari string mulai dari indeks yang ada di textBox6 sebanyak karakter yang ada di textBox7. Hasil ditampilkan di textBox8. Menggunakan try-catch untuk handle error input.

Button 4 - Split​
private void button4_Click(object sender, EventArgs e)
{
string[] data;
data = textBox1.Text.Split(textBox9.Text[0]);

if (data.length > 0)
{
for (int i = 0; i < data.Length; i++)
{
MessageBox.Show(data[i], "data di indeks ke-" + i,
MessageBoxButtons.OK);
}
}
}

Penjelasan: Memisahkan string berdasarkan separator yang ada di textBox9, kemudian menampilkan masing-masing hasil pemisahan dalam MessageBox.

Hasil Praktikum​

Aplikasi akan terlihat seperti:

alt text


3.2 Percobaan 2: Serial Transmit​

Tujuan​

Membuat aplikasi sederhana yang dapat mengirimkan data ke mikrokontroller melalui port serial.

Persiapan​

Sebelum membuat aplikasi, pastikan dulu Arduino dapat berkomunikasi dengan komputer dengan cara mengecek COM port.

Langkah 1: Hubungkan Arduino UNO dengan komputer

Gunakan kabel USB Arduino untuk menghubungkan Arduino ke port USB laptop.

┌─────────────┐        USB Cable        ┌──────────────┐
│ Arduino UNO │────────────────────────►│ Laptop/PC │
└─────────────┘ └──────────────┘

Langkah 2: Buka Device Manager

  1. Klik kanan pada COMPUTER
  2. Pilih MANAGE
  3. Pilih DEVICE MANAGER

Langkah 3: Cek COM Port

Dari Device Manager, cari Ports (COM & LPT) dan lihat COM port yang digunakan Arduino (biasanya COM3, COM4, dll). COM port ini diperlukan untuk pengaturan serialPort di Visual C#.

alt text

Membuat Aplikasi Serial Transmit​

Langkah 1: Buat project baru

  1. Buka Visual C#
  2. Buat project baru bernama "Serial Transmit" atau serupa
  3. Pilih Windows Forms Application

Langkah 2: Design tampilan

Gunakan serialPort, textBox dan button, kemudian design sesuai gambar berikut:

alt text

Langkah 3: Aktifkan event click button

Langkah 4: Tambahkan program untuk button "Port Aktif"

private void button1_Click(object sender, EventArgs e)
{
if(button1.Text == "Port Aktif")
{
try
{
serialPort1.PortName = "COM3"; // Sesuaikan dengan COM port Arduino
if (serialPort1.IsOpen) serialPort1.Close();

serialPort1.Open();
button1.Text = "Port Non Aktif";
button2.Enabled = true;
}
catch (Exception err)
{
MessageBox.Show(err.ToString());
serialPort1.Close();
button1.Text = "Port Aktif";
button2.Enabled = false;
}
}
else
{
serialPort1.Close();
button1.Text = "Port Aktif";
button2.Enabled = false;
}
}

Penjelasan:

  • Jika port belum terbuka, buka port dengan PortName = "COM3"
  • Jika port sudah terbuka, tutup port
  • Update button text dan enable/disable button kirim sesuai kondisi

Langkah 5: Tambahkan program untuk button "Kirim"

private void button2_Click(object sender, EventArgs e)
{
if (serialPort1.IsOpen)
serialPort1.Write(textBox1.Text[0].ToString());
}

Penjelasan:

  • Cek apakah port serial sudah terbuka
  • Kirim karakter pertama dari textBox1 ke Arduino

Langkah 6: Buat program Arduino

Ketikkan program berikut di Arduino IDE:

void setup()
{
Serial.begin(9600);
pinMode(13, OUTPUT);
digitalWrite(13, LOW);
}

void loop()
{
if(Serial.available())
{
char data = (char)Serial.read();

if(data == 'a')
digitalWrite(13, HIGH);
else
digitalWrite(13, LOW);
}
}

Penjelasan:

  • Serial.begin(9600) — Inisialisasi serial dengan baud rate 9600
  • pinMode(13, OUTPUT) — Set pin 13 sebagai output (untuk LED)
  • Serial.available() — Cek apakah ada data dari PC
  • Serial.read() — Baca data dari PC
  • Jika data adalah 'a', nyalakan LED (HIGH), jika tidak matikan (LOW)

Langkah 7: Upload program ke Arduino

  1. Hubungkan Arduino dengan USB
  2. Buka Arduino IDE
  3. Copy program di atas ke Arduino IDE
  4. Pilih Board: Arduino Uno
  5. Pilih Port: COM3 (atau COM port Arduino Anda)
  6. Klik Upload

Langkah 8: Jalankan aplikasi

  1. Jalankan aplikasi Visual C# dengan F5
  2. Klik button "Port Aktif"
  3. Ketikkan 'a' di textBox1
  4. Klik button "Kirim"
  5. Perhatikan LED pin 13 di Arduino (LED akan menyala jika data 'a' terkirim)

Hasil Praktikum​

Ketika button "Kirim" diklik, karakter di textBox1 akan dikirim ke Arduino, dan LED akan menyala jika karakter adalah 'a'.


3.3 Percobaan 3: Serial Receive​

Tujuan​

Membuat aplikasi sederhana yang dapat menerima data dari mikrokontroller melalui port serial dan menampilkan dalam bentuk grafik.

Persiapan​

Sebelum membuat aplikasi Visual C#, buat dulu program untuk Arduino yang mengirimkan data random ke PC.

Langkah 1: Program Arduino penghasil data random

int angkaRandom;

void setup()
{
Serial.begin(9600);
}

void loop()
{
angkaRandom = random(300);
Serial.println(angkaRandom);
delay(1000);
}

Penjelasan:

  • random(300) — Generate angka random 0-299
  • Serial.println(angkaRandom) — Kirim ke PC dengan newline
  • delay(1000) — Tunggu 1 detik

Langkah 2: Upload ke Arduino

Sama seperti praktikum 2, upload program ke Arduino.

Membuat Aplikasi Visual C#​

Langkah 1: Buat project baru

Buat project baru dengan nama "Serial Receive" atau serupa.

Langkah 2: Design form

Gunakan serialPort, label, richTextBox, panel dan button sesuai gambar:

┌──────────────────────────────────────┐
│ Grafik [_][□][X] │
├──────────────────────────────────────┤
│ Data │
│ [ Connect ] │
│ │
│ ┌────────────────────────────────┐ │
│ │ │ │
│ │ [Graphics Panel] │ │
│ │ (Untuk menggambar grafik) │ │
│ │ │ │
│ └────────────────────────────────┘ │
│ │
│ Data 1: 0 Data 4: 0 │
│ Data 2: 0 Data 5: 0 │
│ Data 3: 0 │
│ │
└──────────────────────────────────────┘

alt text

Langkah 3: Deklarasi variabel global

private Graphics objGraphic;
Label[] data = new Label[5];
string dataIn;

public Form1()
{
InitializeComponent();

objGraphic = panel1.CreateGraphics();

data[0] = label1;
data[1] = label2;
data[2] = label3;
data[3] = label4;
data[4] = label5;
}

Penjelasan:

  • objGraphic — Object Graphics untuk menggambar di panel
  • data[] — Array label untuk menampilkan nilai data
  • panel1.CreateGraphics() — Siapkan panel untuk drawing

Langkah 4: Button Connect event

private void button1_Click(object sender, EventArgs e)
{
if (button1.Text == "Connect")
{
try
{
serialPort1.PortName = "COM3";

if (serialPort1.IsOpen) serialPort1.Close();

serialPort1.Open();
button1.Text = "Disconnect";

for(int i = 0; i < 5; i++)
{
data[i].Text = "0";
}
richTextBox1.Clear();
}
catch
{
button1.Text = "Connect";
}
}
else
{
serialPort1.Close();
button1.Text = "Connect";
}
}

Langkah 5: Serial DataReceived event

private void serialPort1_DataReceived(object sender, SerialDataReceivedEventArgs e)
{
dataIn = serialPort1.ReadLine();
this.Invoke(new EventHandler(tampilkan));
}

private void tampilkan(object sender, EventArgs e)
{
richTextBox1.AppendText(dataIn);
richTextBox1.ScrollToCaret();

for(int i = 0; i < 4; i++)
{
data[i].Text = data[i + 1].Text;
}
data[4].Text = dataIn;

gambarGrafik();
}

Penjelasan:

  • DataReceived — Event yang dipicu ketika ada data masuk dari serial
  • ReadLine() — Baca satu baris data (sampai newline)
  • this.Invoke() — Jalankan di thread utama (untuk update UI)
  • Shift data: data[0] ← data[1] ← ... ← data[4]

Langkah 6: Method menggambar grafik

void gambarGrafik()
{
int xLama = 0, yLama = 0;
panel1.Refresh();

for (int i = 100; i < 850; i += 150)
{
objGraphic.FillEllipse(new SolidBrush(Color.Red),
((i - 100) - 5), ((300 - (Convert.ToInt16(data[(i - 100) / 150]).Text)) - 5), 10, 10);

if (i != 100)
{
objGraphic.DrawLine(new Pen(Color.DarkOrange),
(i - 100), 300 - (Convert.ToInt16(data[((i - 100) / 150)].Text)),
((i - 100) - 150), 300 - (Convert.ToInt16(data[((i - 100) / 150) - 1].Text))
);
}

xLama = (i - 100);
yLama = 300 - (Convert.ToInt16(data[((i - 100) / 150)].Text));
}
}

Penjelasan:

  • Loop dari i=100 hingga 850 dengan step 150 (untuk menampilkan 5 titik)
  • FillEllipse — Gambar titik merah di setiap data
  • DrawLine — Hubungkan titik-titik dengan garis

Langkah 7: Jalankan aplikasi

  1. Upload program Arduino terlebih dahulu
  2. Hubungkan Arduino dengan USB
  3. Jalankan aplikasi dengan F5
  4. Klik "Connect"
  5. Data akan muncul di RichTextBox dan digambarkan di panel sebagai grafik

Hasil Praktikum​

Aplikasi akan menampilkan:

  • Data terbaru di RichTextBox
  • 5 data terbaru di Label (Data 1-5)
  • Grafik garis yang menghubungkan 5 titik data

3.4 Percobaan 4: Serial Receive dengan Chart Control​

Tujuan​

Menerima data dari serial port dan menampilkan dalam bentuk Chart/grafik menggunakan Chart control bawaan .NET.

Design Form​

┌─────────────────────────────────────┐
│ Terima Data Serial - Rifqi [_][□][X] │
├─────────────────────────────────────┤
│ Pengaturan Serial │
│ COM3 ▼ [Cek Port] [Koneksi] │
│ │
│ ┌────────────────────────┐ │
│ │ │ 100 │
│ │ [CHART] │ 80 │
│ │ │ 60 │
│ │ (Bar/Column Chart) │ 40 │
│ │ │ 20 │
│ │ │ 0 │
│ │ │ 1 2 3 4 │
│ └────────────────────────┘ │
│ │
│ Data: │
│ [ │ │
│ [ RichTextBox untuk output data ] │
│ [ │ │
│ │
└─────────────────────────────────────┘

alt text

Langkah Implementasi​

Langkah 1: Buat project baru

Buat project bernama "Terima Data Serial" atau serupa.

Langkah 2: Tambahkan Chart control

  1. Dari Toolbox, cari Chart
  2. Drag ke Form
  3. Klik Chart → Properties
  4. Cari Series → Klik tombol (...)
  5. Di Series Collection Editor:
    • Pastikan ada Series1
    • ChartType: Column
    • Klik OK

Langkah 3: Deklarasi variabel

string dataIn;
int x = 0;

Langkah 4: Tambahkan button Click events

Button Cek Port:

private void button1_Click(object sender, EventArgs e)
{
cekPort();
}

void cekPort()
{
var ports = System.IO.Ports.SerialPort.GetPortNames();
comboBox1.DataSource = ports;
comboBox1.Text = "Pilih Salah Satu";
}

Button Koneksi:

private void button2_Click(object sender, EventArgs e)
{
if(comboBox1.Text != "Pilih Salah Satu")
{
if (button2.Text == "Koneksi")
{
try
{
serialPort1.PortName = comboBox1.Text;

if (serialPort1.IsOpen) serialPort1.Close();

serialPort1.Open();
button2.Text = "Putus Koneksi";
richTextBox1.Clear();
}
catch
{
button2.Text = "Koneksi";
}
}
else
{
serialPort1.Close();
button2.Text = "Koneksi";
cekPort();
}
}
else
{
MessageBox.Show("Pilih port terlebih dahulu!");
}
}

Langkah 5: DataReceived event

private void serialPort1_DataReceived(object sender, SerialDataReceivedEventArgs e)
{
dataIn = serialPort1.ReadLine();
this.Invoke(new EventHandler(tampilkan));
}

private void tampilkan(object sender, EventArgs e)
{
richTextBox1.AppendText(dataIn);
richTextBox1.ScrollToCaret();

chart1.Series["Series1"].Points.AddXY(x, Convert.ToInt16(dataIn));
x++;
}

Penjelasan:

  • AddXY(x, y) — Tambah point ke chart dengan koordinat x dan nilai y
  • x++ — Increment x untuk point berikutnya

Langkah 6: Jalankan aplikasi

  1. Upload program Arduino ke mikrokontroller
  2. Klik "Cek Port"
  3. Pilih COM port Arduino
  4. Klik "Koneksi"
  5. Data akan terlihat di RichTextBox dan Chart otomatis ter-update

Hasil Praktikum​

  • Data dari Arduino ditampilkan di RichTextBox
  • Chart otomatis menampilkan bar/kolom untuk setiap data yang diterima
  • X-axis otomatis increment untuk setiap data baru

IV. Tugas​

Deskripsi Tugas​

Buatlah sebuah aplikasi yang dapat menerima data dari serial port. Data yang diterima berupa 1 (satu) paket data, yang mana dalam 1 paket data tersebut terdapat 3 data yang harus ditampilkan ke grafik.

Paket data berasal dari data random yang di-generate oleh Arduino yang dikirimkan via serial port.

Program Arduino untuk Tugas​

int angkaRandom;

void setup()
{
Serial.begin(9600);
}

void loop()
{
Serial.print("*");
angkaRandom = random(300);
Serial.print(angkaRandom);
Serial.print(",");
angkaRandom = random(300);
Serial.print(angkaRandom);
Serial.print(",");
angkaRandom = random(300);
Serial.println(angkaRandom);

delay(1000);
}

Penjelasan Program Arduino:

  • Serial.print("*") — Kirim karakter '*' sebagai penanda awal paket
  • Generate 3 angka random 0-299
  • Pisahkan dengan koma ','
  • Paket lengkap contoh: *123,245,89

Contoh Output Aplikasi​

Aplikasi yang dibuat diharapkan memiliki tampilan seperti:

┌─────────────────────────────────────┐
│ TUGAS 4 [_][□][X] │
├─────────────────────────────────────┤
│ Pengaturan Serial │
│ COM3 ▼ [Cek Port] [Putus Koneksi] │
│ │
│ ┌────────────────────────────────┐ │
│ │ 300 ┌──┐│ │
│ │ 250 ┌──┐ ┌──┐ │ ││ │
│ │ 200 ┌──┐ │ │ │ │ ┌──┘ ││ │
│ │ 150 │ │ │ │ │ │ │ ┌──┘│ │
│ │ 100 │ │ │ │ │ │ │ │ │ │
│ │ 50 │ │ │ │ │ │ │ │ │ │
│ │ 0 └──┘ └──┘ └──┘ └──┘ │ │
│ │ 1 2 3 4 5 6 │
│ │ data1 ──data2──data3│
│ │ │
│ └────────────────────────────────┘ │
│ │
│ Data Raw: │
│ C:27,172,1128 │
│ C:27,1... │
│ │
│ Data 1: Tek Data 2: 300 Data │
│ Tak ▼ Garis ▼ │
│ 300 │
│ 250 │
│ 200 │
│ 150 │
│ 100 │
│ Garis ▼ │
│ │
└─────────────────────────────────────┘

Ketentuan Tugas​

  • ✅ Mampu mengolah string (parsing) paket data yang diterima (pisahkan 3 data)
  • ✅ Menampilkan 3 data dalam grafik (Chart dengan 3 series atau berbeda warna)
  • ✅ Menampilkan data raw di RichTextBox
  • ✅ Implementasi try-catch untuk error handling
  • ✅ Button Connect/Disconnect untuk kontrol port
  • ✅ ComboBox untuk pemilihan COM port
  • ✅ Label untuk menampilkan nilai data terbaru

Penilaian Tugas​

KriteriaBobotKeterangan
Parsing Data20%Mampu pisahkan 3 data dari paket
Tampilan GUI20%Design form rapi dan user-friendly
Grafik/Chart30%Menampilkan 3 series data dengan benar
Error Handling15%Implementasi try-catch
Dokumentasi15%Komentar kode dan penjelasan

Kesimpulan​

Modul 4 ini mencakup:

String Processing​

  • ✅ Insert, Remove, ToLower, ToUpper
  • ✅ IndexOf, LastIndexOf, Substring
  • ✅ Replace, Split, Join, Trim
  • ✅ Parsing data dengan string methods

Serial Communication​

  • ✅ Membuka/menutup port serial
  • ✅ Mengirim data (Write)
  • ✅ Menerima data (ReadLine, DataReceived)
  • ✅ Threading dengan Invoke()
  • ✅ Visualisasi dengan Chart control

Praktikum​

  • ✅ Percobaan 1: String manipulation dengan berbagai method
  • ✅ Percobaan 2: Serial Transmit untuk kontrol LED
  • ✅ Percobaan 3: Serial Receive dengan Custom Graphics
  • ✅ Percobaan 4: Serial Receive dengan Chart Control
  • ✅ Tugas: Parsing paket data 3 parameter ke grafik

Selamat mengerjakan praktikum dan tugas! Semoga sukses! 🎓

Sumber: Modul Pemrograman Berbasis Komputer, Politeknik Negeri Batam