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
| Method | Contoh | Hasil |
|---|---|---|
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":
| Method | Contoh | Hasil |
|---|---|---|
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"):
| Method | Contoh | Hasil |
|---|---|---|
Join | string[] x = {"a","b"}; String.Join("-",x) | "a-b" |
Split | string[] z = str.Split() | Array ["My", "String"] |
Trim | str.Trim() | "My String" |
Langkah-Langkah Praktikum
Langkah 1: Buka Visual C# dan buat project baru
- Buka Visual Studio 2022
- Pilih Create New Project
- Pilih Windows Forms App (.NET Framework)
- Berikan nama project pada project tersebut
Langkah 2: Design Form
Gunakan textBox dan button, kemudian design tampilan sesuai gambar berikut:

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:

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
- Klik kanan pada COMPUTER
- Pilih MANAGE
- 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#.

Membuat Aplikasi Serial Transmit
Langkah 1: Buat project baru
- Buka Visual C#
- Buat project baru bernama "Serial Transmit" atau serupa
- Pilih Windows Forms Application
Langkah 2: Design tampilan
Gunakan serialPort, textBox dan button, kemudian design sesuai gambar berikut:

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 9600pinMode(13, OUTPUT)— Set pin 13 sebagai output (untuk LED)Serial.available()— Cek apakah ada data dari PCSerial.read()— Baca data dari PC- Jika data adalah 'a', nyalakan LED (HIGH), jika tidak matikan (LOW)
Langkah 7: Upload program ke Arduino
- Hubungkan Arduino dengan USB
- Buka Arduino IDE
- Copy program di atas ke Arduino IDE
- Pilih Board: Arduino Uno
- Pilih Port: COM3 (atau COM port Arduino Anda)
- Klik Upload
Langkah 8: Jalankan aplikasi
- Jalankan aplikasi Visual C# dengan F5
- Klik button "Port Aktif"
- Ketikkan 'a' di textBox1
- Klik button "Kirim"
- 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-299Serial.println(angkaRandom)— Kirim ke PC dengan newlinedelay(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 │
│ │
└──────────────────────────────────────┘

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 paneldata[]— Array label untuk menampilkan nilai datapanel1.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 serialReadLine()— 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 dataDrawLine— Hubungkan titik-titik dengan garis
Langkah 7: Jalankan aplikasi
- Upload program Arduino terlebih dahulu
- Hubungkan Arduino dengan USB
- Jalankan aplikasi dengan F5
- Klik "Connect"
- 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 ] │
│ [ │ │
│ │
└─────────────────────────────────────┘

Langkah Implementasi
Langkah 1: Buat project baru
Buat project bernama "Terima Data Serial" atau serupa.
Langkah 2: Tambahkan Chart control
- Dari Toolbox, cari Chart
- Drag ke Form
- Klik Chart → Properties
- Cari Series → Klik tombol (...)
- 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 yx++— Increment x untuk point berikutnya
Langkah 6: Jalankan aplikasi
- Upload program Arduino ke mikrokontroller
- Klik "Cek Port"
- Pilih COM port Arduino
- Klik "Koneksi"
- 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
| Kriteria | Bobot | Keterangan |
|---|---|---|
| Parsing Data | 20% | Mampu pisahkan 3 data dari paket |
| Tampilan GUI | 20% | Design form rapi dan user-friendly |
| Grafik/Chart | 30% | Menampilkan 3 series data dengan benar |
| Error Handling | 15% | Implementasi try-catch |
| Dokumentasi | 15% | 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