LAPORAN WORKSHOP SISTEM ANTARMUKA

Novanna Rahma Zani – 1103181047

PRAKTIKUM 6
Judul : Lab6 – Simple Text Parsing
Tanggal : 6 Mei 2020

TUJUAN
Mahasiswa dapat menggunakan SerialPort class untuk mengirim dan menerima data antar PC.

PENDAHULUAN
Saat anda akan melakukan pertukaran data antara sistem komputer dengan peralatan lain,
anda membutuhkan sebuah protokol komunikasi. Dalam istilah telekomunikasi, protokol
komunikasi adalah sebuah sistem aturan yang diperlukan untuk bertukar data, Protokol
komunikasi mengatur tentang format struktur urutan data, arti dari tiap data, sinkronisasi data,
dan metode deteksi kesalahan (error detection). Pada praktikum ini, kita akan mengambil paket
data dari sebuah perangkat yang mengirimkan empat macam data, yaitu data suhu, data
kelembabab udara, data tekanan udara, dan data UV ndeks, seperti diperlihatkan oleh Gambar 1.

Gambar 1. Ilustrasi hubungan komunikasi antara PC dengan mikrokontroler yang berisi empat
data sensor
Perangkat mikrokontroler mengirimkan keempat data sensor secara terus-menerus (broadcast)
menggunakan format data seperti ditunjukkan oleh Gambar 2.

Gambar 2. Format data dari mikrokotroler

dimana @ adalah karakter pembuka, T adalah data suhu, H adalah data kelembaban udara, P
adalah data tekanan udara, U adalah data UV index, tanda koma adalah pemisah antar data, CR
adalah karakter kontrol Carriage Return, dan LF adalah karakter kontrol Line Feed.
Setelah data seperti pada Gambar 2 diterima oleh PC, untuk memisahkan empat data tersebut
digunakan instruksi Split yang telah disediakan oleh Visual Studio. Instruksi Split membutuhkan
parameter pemisah, dalah kasus ini adalah tanda koma.
 Novanna Rahma Zani - 1103181047

PERALATAN
1. Satu unit komputer dengan Visual Studio 2019 dan aplikasi com0com
2. Aplikasi simulator sebagai pengganti mikrokontroler

PROSEDUR PERCOBAAN
1. Memastikan telah terpasang virtual serial port untuk menghubungkan aplikasi C# yang
dibuat dengan simulator mikrokontroler.
2. Memilih menu File → New → Project. Membuat project baru menggunakan Windows
Form App. Mengatur nama dan lokasi.
3. Dengan menggunakan Toolbox, menambahkan button, label, textBox, listBox, comboBox,
statusStrip (dengan statusLabel) dan serialPort, seperti pada Gambar 3. Pada bagian Baud
rate, dapat ditambahkan nilai 9600, 14400, 19200, 38400, 56000, 57600, 76800, 115200 ke
dalam comboBox sebagai pilihan default.

Gambar 3. Tampilan form

4. Meng-klik ganda pada form dan mengetikkan kode program berikut.
private void Form1_Load(object sender, EventArgs e)
{
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
comboBox1.Text = comboBox1.Items[comboBox1.Items.Count - 1].ToString();
}
5. Klik ganda pada tombol Connect dan ketikkan kode program berikut.
private void button1_Click(object sender, EventArgs e)
{
 Novanna Rahma Zani - 1103181047

try
{
serialPort1.PortName = comboBox1.Text;
serialPort1.BaudRate = Int32.Parse(comboBox2.Text);
serialPort1.NewLine = "\r\n";
serialPort1.Open();
toolStripStatusLabel1.Text = serialPort1.PortName + " is connected.";
}
catch (Exception ex)
{
toolStripStatusLabel1.Text = "ERROR: " + ex.Message.ToString();
}
}
6. Klik ganda pada tombol Close dan ketikkan kode program berikut.
private void button2_Click(object sender, EventArgs e)
{
serialPort1.Close();
toolStripStatusLabel1.Text = serialPort1.PortName + " is closed.";
}
7. Pada Form1.cs [Design], klik pada komponen serialPort1. Pada jendela Properties, klik
symbol Event, dan klik ganda pada event DataReceived. Mengetikkan kode program berikut.
private void serialPort1_DataReceived(object sender,
System.IO.Ports.SerialDataReceivedEventArgs e)
{
String receivedMsg = serialPort1.ReadLine();
Tampilkan(receivedMsg);
}
private delegate void TampilkanDelegate(object item);
private void Tampilkan(object item)
{
if (InvokeRequired)
// This is a worker thread so delegate the task.
listBox1.Invoke(new TampilkanDelegate(Tampilkan), item);
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}
private void splitData(object item)
{
String[] data = item.ToString().Split(',');
 Novanna Rahma Zani - 1103181047

textBox1.Text = data[1]; // textbox untuk data suhu

textBox2.Text = data[2]; // textbox untuk data kelembaban
textBox3.Text = data[3]; // textbox untuk data tekanan udara
textBox4.Text = data[4]; // textbox untuk data uv index
}
}
8. Menjalankan aplikasi dengan memilih menu Debug → Start Debugging. Memilih serial
port yang berpasangan lalu klik tombol Connect. Aplikasi siap untuk menerima data.

Gambar 4. Aplikasi Visual Studio siap menerima data

9. Menjalankan simulator mikrokontroler seperti ditunjukkan pada Gambar 5. Mengatur agar
simulator menggunakan port serial yang berpasangan dengan apikasi anda pada Gambar 4.
Pada simulator, meng-klik tombol Connect untuk membuka port serial. Kemudian meng-klik
tombol START Streaming untuk mengirimkan data sensor.
10. Jika sudah selesai, komunikasi bisa ditutup dengan cara klik tombol Close pada simulator
dan klik tombol Close pada aplikasi.

Gambar 5. Simulator mikrokontroler

Gambar 6. Screenshot saat kedua aplikasi berkomunikasi

 Novanna Rahma Zani - 1103181047

HASIL PERCOBAAN
6a. Hasil Percobaan Sesuai Prosedur Modul 6
- Tampilan Aplikasi sesuai modul 6

- Penjelasan Program
a) Combobox pada COMM Port
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
comboBox1.Text = comboBox1.Items[comboBox1.Items.Count - 1].ToString();
Program diatas merupakan program yang berapa di private form1_load, form1
membuat combobox1 diisi oleh nama serial port yang diambil dari
System.IO.Ports.SerialPort.GetPortNames(); Lalu serial port yang dikenali
ditampilkan di comboBox1.
b) Combobox pada Baudrate
Tidak seperti COMM Port yang nama serial portnya diambil dari system.IO,
nilai baudrate diatur manual dengan menambahkan items pada comboBox2
seperti program dibawah,
public Form1()
{
InitializeComponent();
comboBox2.Items.Add("9600");
comboBox2.Items.Add("14400");
comboBox2.Items.Add("19200");
comboBox2.Items.Add("38400");
comboBox2.Items.Add("56000");
comboBox2.Items.Add("57600");
comboBox2.Items.Add("76800");
comboBox2.Items.Add("115200");
}
 Novanna Rahma Zani - 1103181047

c) Data yang diterima oleh Listbox received data

Setelah COMM Port dan Baudrate diatur lalu user klik Connect (button1)
maka proses selanjutnya yang akan dilakukan aplikasi adalah,
private void button1_Click(object sender, EventArgs e)
{
try
{
serialPort1.PortName = comboBox1.Text;
serialPort1.BaudRate = Int32.Parse(comboBox2.Text);
serialPort1.NewLine = "\r\n";
serialPort1.Open();
toolStripStatusLabel1.Text = serialPort1.PortName + " is connected.";
}
catch (Exception ex)
{
toolStripStatusLabel1.Text = "ERROR: " + ex.Message.ToString();
}
}
Ketika com sudah dikenali dan nilai baudrate juga sudah ditentukan, maka
aplikasi akan mengidentifikasi serialPort1 mulai dari PortName, Baudrate
hingga newline lalu membuka/menyambukan serialPort1 tersebut dengan
serialPort1.Open(). Jika berhasil mengenalkan serialPort maka
toolStripStatus akan memberi informasi berupa nama serial port is connected
seperti pada program.
Ketika aplikasi sudah tersambung, maka user bisa menjalankan
simulatorMicrocontroller.exe. lalu setelah tersambung dengan serial port dan
baudrate yang sesuai dengan aplikasi maka user bisa klik Start Streaming
untuk mulai mengirimkan data.
Pada saat Simulator memulai streaming, ListBox1 pada aplikasi baru terisi.
private void serialPort1_DataReceived(object sender,
System.IO.Ports.SerialDataReceivedEventArgs e)
{
String receivedMsg = serialPort1.ReadLine();
Tampilkan(receivedMsg);
}

Ketika simulator mulai mengirimkan data, serialport1 pada Aplikasi akan

menerima data seperti pada program diatas. Terlihat pada program, data yang
dibaca serial port [serialPort1.ReadLine();] diidentifikasikan program sebagai
receivedMsg kemudian ditampilkan dengan tambahan object yaitu
Tampilkan.
 Novanna Rahma Zani - 1103181047

private delegate void TampilkanDelegate(object item);

private void Tampilkan(object item)
{
if (InvokeRequired)
listBox1.Invoke(new TampilkanDelegate(Tampilkan), item);
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}

Kemudian Object tambahan tersebut di delegate atau diidentifikasi sebagai

private delegate void, yaitu object tambahan yang diinisiasi agar bisa
dipanggil di proses-proses selanjutnya. Dalam object Tampilkan ini, ListBox1
akan mulai menampilkan hasil data yang diterima serial port, kemudian dengan
data data selanjutnya. Data yang diterima merupakan data parsing yang terdiri
dari 4 items. ListBox1 hanya akan menampilkan data sesuai data yang dikirim
mikrokontroller. Data ini akan diarahkan ke splitdata(item) untuk dipisahkan
antar data.
d) Textbox pada splitted data
private void splitData(object item)
{
String[] data = item.ToString().Split(',');
textBox1.Text = data[1]; // textbox untuk data suhu
textBox2.Text = data[2]; // textbox untuk data kelembaban
textBox3.Text = data[3]; // textbox untuk data tekanan udara
textBox4.Text = data[4]; // textbox untuk data uv index
}

Setelah data ditampilkan di ListBox1, data juga akan di-parsing ke dalam

textbox yang sesuai. Data yang diterima di convert menjadi string dengan
pemisahnya yaitu (,) koma. Setiap data ditampilkan dalam textbox yang sesuai.
 Novanna Rahma Zani - 1103181047

- Program Lengkap
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace GUI_Lab6
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
comboBox2.Items.Add("9600");
comboBox2.Items.Add("14400");
comboBox2.Items.Add("19200");
comboBox2.Items.Add("38400");
comboBox2.Items.Add("56000");
comboBox2.Items.Add("57600");
comboBox2.Items.Add("76800");
comboBox2.Items.Add("115200");
}

private void label5_Click(object sender, EventArgs e)

{

private void Form1_Load(object sender, EventArgs e)

{
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
comboBox1.Text = comboBox1.Items[comboBox1.Items.Count -
1].ToString();
}

private void button1_Click(object sender, EventArgs e)

{
try
{
serialPort1.PortName = comboBox1.Text;
serialPort1.BaudRate = Int32.Parse(comboBox2.Text);
serialPort1.NewLine = "\r\n";
serialPort1.Open();
toolStripStatusLabel1.Text = serialPort1.PortName + " is
connected.";
}
 Novanna Rahma Zani - 1103181047
catch (Exception ex)
{
toolStripStatusLabel1.Text = "ERROR: " +
ex.Message.ToString();
}
}

private void button2_Click(object sender, EventArgs e)

{
serialPort1.Close();
toolStripStatusLabel1.Text = serialPort1.PortName + " is
closed.";
}

private void serialPort1_DataReceived(object sender,

System.IO.Ports.SerialDataReceivedEventArgs e)
{
String receivedMsg = serialPort1.ReadLine();
Tampilkan(receivedMsg);
}

private delegate void TampilkanDelegate(object item);

private void Tampilkan(object item)
{
if (InvokeRequired)
listBox1.Invoke(new TampilkanDelegate(Tampilkan), item);
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}

private void splitData(object item)

{
String[] data = item.ToString().Split(',');
textBox1.Text = data[1]; // textbox untuk data suhu
textBox2.Text = data[2]; // textbox untuk data kelembaban
textBox3.Text = data[3]; // textbox untuk data tekanan udara
textBox4.Text = data[4]; // textbox untuk data uv index
}

}
}
 Novanna Rahma Zani - 1103181047

- Menjalankan aplikasi beserta simulator mikrokontroller

TUGAS
6b. Tugas 1
Jelaskan apa yang dikerjakan oleh method private void splitData(object item) pada langkah ke-
7!
Jawab :
splitData merupakan object tambahan pada program untuk mengarahkan parsing data ke textBox
yang sesuai. splitData membawa object Item pada program sebelumnya. Jika sebelumnya data
sudah diterima oleh object Item masih berupa paket data. Private void splitData ini
mengidentifikasinya menjadi data [ String[] data = item.ToString().Split(','); ] yang dimana paket
data ini di parsing, dipisahkan sesuai dengan kategori datanya.
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}

private void splitData(object item)

{
String[] data = item.ToString().Split(',');
textBox1.Text = data[1]; // textbox untuk data suhu
 Novanna Rahma Zani - 1103181047
textBox2.Text = data[2]; // textbox untuk data kelembaban
textBox3.Text = data[3]; // textbox untuk data tekanan udara
textBox4.Text = data[4]; // textbox untuk data uv index
}