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